在js中修改html body的樣式

Posted on by

一、原始定義

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

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

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

// 獲取body、html節點style（主要是這裡html，一開始不清楚獲取方式）
let bodyStyle = document.body.style
let htmlStyle = document.getElementsByTagName('html')[0].style

// 獲取瀏覽器的寬度，width 也可以設置為任意值
let width = document.documentElement.clientWidth || document.body.clientWidth

// 重置body寬度
bodyStyle.width = `${width}px`

// 重置html寬度
htmlStyle.width = `${width}px`

// 或者其他樣式的修改，如：
htmlStyle['min-width'] = `${width}px`

三、效果：寬度已被修改

到此這篇關於在js中修改html body的樣式的文章就介紹到這瞭,更多相關js中修改html body的樣式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：