在js中修改html body的樣式
更新時(shí)間：2021年11月10日 17:10:48 作者：smile1213
這篇文章主要介紹了在js中修改html body的樣式，下面文章圍繞js修改html 和body樣式的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)大家有所幫助
一、原始定義
先在css中定義：body, html 寬高為300px
body, html {
width: 300px;
height: 300px;
}
二、js操作，以修改寬度為例
// 獲取body、html節(jié)點(diǎn)style（主要是這里html，一開始不清楚獲取方式）
let bodyStyle = document.body.style
let htmlStyle = document.getElementsByTagName('html')[0].style
// 獲取瀏覽器的寬度，width 也可以設(shè)置為任意值
let width = document.documentElement.clientWidth || document.body.clientWidth
// 重置body寬度
bodyStyle.width = `${width}px`
// 重置html寬度
htmlStyle.width = `${width}px`
// 或者其他樣式的修改，如：
htmlStyle['min-width'] = `${width}px`
三、效果：寬度已被修改
到此這篇關(guān)于在js中修改html body的樣式的文章就介紹到這了,更多相關(guān)js中修改html body的樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- html加css樣式實(shí)現(xiàn)js美食項(xiàng)目首頁示例代碼
- HTML+CSS+JavaScript做女朋友版的刮刮樂(一看就會(huì))
- JavaScript中html畫布的使用與頁面存儲(chǔ)技術(shù)詳解
- JS、CSS和HTML實(shí)現(xiàn)注冊(cè)頁面
- SpringMVC @RequestBody Date類型的Json轉(zhuǎn)換方式
- C#通過HttpWebRequest發(fā)送帶有JSON Body的POST請(qǐng)求實(shí)現(xiàn)
- 解決@RequestBody接收json對(duì)象報(bào)錯(cuò)415的問題
- 聊聊@RequestBody和Json之間的關(guān)系
相關(guān)文章
文字幻燈片...2006-06-06
JavaScript 運(yùn)行機(jī)制詳解再淺談Event Loop
這篇文章主要介紹了JavaScript 運(yùn)行機(jī)制詳解及淺談了Event Loop，感興趣的小伙伴可以和小編一起閱讀下面文章的具體內(nèi)容2021-09-09
Three.js實(shí)現(xiàn)雪糕地球的使用示例詳解
這篇文章主要為大家介紹了Three.js實(shí)現(xiàn)雪糕地球的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
sessionStorage多Tab標(biāo)簽頁數(shù)據(jù)共享問題分析
這篇文章主要為大家介紹了sessionStorage多Tab標(biāo)簽頁數(shù)據(jù)共享問題分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
競(jìng)態(tài)條件Race condition及如何避免的三種方案詳解
這篇文章主要為大家介紹了競(jìng)態(tài)條件Race condition及如何避免的三種方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
理解js中原型、原型鏈這個(gè)概念，絕對(duì)是幫助我們更深入學(xué)習(xí)js的必要一步，比如，如果js開發(fā)者想理解js繼承，new關(guān)鍵字原理，甚至封裝組件、優(yōu)化代碼，弄明白js中原型、原型鏈更是前提條件。本篇文章，用最簡(jiǎn)潔的文字，清楚明白講解原型鏈相等關(guān)系和原型、原型鏈存在的意義2021-09-09
父窗口獲取彈出子窗口文本框的值...2006-06-06
本章主要是解決無界微前端環(huán)境下element-ui彈框偏移問題，如果你用的是其他微前端框架，且提供了jsloader這種預(yù)處理器，則可以舉一反三解決同樣的問題2023-08-08
這篇文章主要介紹了微信小程序 slider 詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01
JavaScript數(shù)據(jù)類型對(duì)函數(shù)式編程的影響示例解析
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)類型對(duì)函數(shù)式編程的影響示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02