在js中修改html body的樣式
更新時間：2021年11月10日 17:10:48 作者：smile1213
這篇文章主要介紹了在js中修改html body的樣式，下面文章圍繞js修改html 和body樣式的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助
一、原始定義
先在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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
微信小程序 支付后臺java實(shí)現(xiàn)實(shí)例
這篇文章主要介紹了微信小程序 支付后臺java實(shí)現(xiàn)實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 自己制作小組件實(shí)例詳解的相關(guān)資料,自己制作小組件在項目中應(yīng)用，需要的朋友可以參考下2016-12-12
微信小程序 使用騰訊地圖SDK詳解及實(shí)現(xiàn)步驟
這篇文章主要介紹了微信小程序 使用騰訊地圖SDK詳解及實(shí)現(xiàn)步驟的相關(guān)資料,需要的朋友可以參考下2017-02-02
JavaScript專題之underscore防抖實(shí)例學(xué)習(xí)
這篇文章主要為大家介紹了JavaScript專題之underscore防抖實(shí)例學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
arco?design按需導(dǎo)入報錯排查思路與解決方案解析
這篇文章主要為大家介紹了arco?design?按需導(dǎo)入報錯排查思路與解決方案解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了TypeScript的類型指令單行注釋詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
前端Website?sitemap.xml文件搜索引擎優(yōu)化
這篇文章主要為大家介紹了前端Website的sitemap.xml文件和搜索引擎優(yōu)化實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
TypeScript對象解構(gòu)操作符在Spartacus實(shí)際項目開發(fā)中的應(yīng)用解析
這篇文章主要為大家介紹了TypeScript對象解構(gòu)操作符在Spartacus實(shí)際項目開發(fā)中的應(yīng)用解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
這篇文章主要介紹了微信小程序引用公共js里的方法的實(shí)例詳解的相關(guān)資料,這里提供了實(shí)現(xiàn)的方法，希望能幫助到大家，需要的朋友可以參考下2017-08-08