在js中修改html body的樣式

更新時間：2021年11月10日 17:10:48 作者：smile1213

這篇文章主要介紹了在js中修改html body的樣式，下面文章圍繞js修改html 和body樣式的相關(guān)資料展開詳細內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助

一、原始定義

先在css中定義：body, html 寬高為300px

body, html {
   width: 300px;
   height: 300px;
}

二、js操作，以修改寬度為例

// 獲取body、html節(jié)點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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

微信小程序支付后臺java實現(xiàn)實例
這篇文章主要介紹了微信小程序支付后臺java實現(xiàn)實例的相關(guān)資料,需要的朋友可以參考下
2017-05-05
微信小程序自己制作小組件實例詳解
這篇文章主要介紹了微信小程序自己制作小組件實例詳解的相關(guān)資料,自己制作小組件在項目中應(yīng)用，需要的朋友可以參考下
2016-12-12
微信小程序使用騰訊地圖SDK詳解及實現(xiàn)步驟
這篇文章主要介紹了微信小程序使用騰訊地圖SDK詳解及實現(xiàn)步驟的相關(guān)資料,需要的朋友可以參考下
2017-02-02
JavaScript專題之underscore防抖實例學習
這篇文章主要為大家介紹了JavaScript專題之underscore防抖實例學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
arco?design按需導(dǎo)入報錯排查思路與解決方案解析
這篇文章主要為大家介紹了arco?design?按需導(dǎo)入報錯排查思路與解決方案解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
TypeScript的類型指令單行注釋詳解
這篇文章主要為大家介紹了TypeScript的類型指令單行注釋詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
微信小程序中頂部導(dǎo)航欄的實現(xiàn)代碼
這篇文章主要介紹了微信小程序中頂部導(dǎo)航欄的實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
2017-03-03
前端Website?sitemap.xml文件搜索引擎優(yōu)化
這篇文章主要為大家介紹了前端Website的sitemap.xml文件和搜索引擎優(yōu)化實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
TypeScript對象解構(gòu)操作符在Spartacus實際項目開發(fā)中的應(yīng)用解析
這篇文章主要為大家介紹了TypeScript對象解構(gòu)操作符在Spartacus實際項目開發(fā)中的應(yīng)用解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-07-07
微信小程序引用公共js里的方法的實例詳解
這篇文章主要介紹了微信小程序引用公共js里的方法的實例詳解的相關(guān)資料,這里提供了實現(xiàn)的方法，希望能幫助到大家，需要的朋友可以參考下
2017-08-08