在js中修改html body的樣式
更新時間：2021年11月10日 17:10:48 作者：smile1213
這篇文章主要介紹了在js中修改html body的樣式，下面文章圍繞js修改html 和body樣式的相關資料展開詳細內容,需要的朋友可以參考一下，希望對大家有所幫助
一、原始定義
先在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 也可以設置為任意值
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的樣式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
文字幻燈片...2006-06-06
JavaScript 運行機制詳解再淺談Event Loop
這篇文章主要介紹了JavaScript 運行機制詳解及淺談了Event Loop，感興趣的小伙伴可以和小編一起閱讀下面文章的具體內容2021-09-09
這篇文章主要為大家介紹了Three.js實現雪糕地球的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了sessionStorage多Tab標簽頁數據共享問題分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
競態(tài)條件Race condition及如何避免的三種方案詳解
這篇文章主要為大家介紹了競態(tài)條件Race condition及如何避免的三種方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
理解js中原型、原型鏈這個概念，絕對是幫助我們更深入學習js的必要一步，比如，如果js開發(fā)者想理解js繼承，new關鍵字原理，甚至封裝組件、優(yōu)化代碼，弄明白js中原型、原型鏈更是前提條件。本篇文章，用最簡潔的文字，清楚明白講解原型鏈相等關系和原型、原型鏈存在的意義2021-09-09
父窗口獲取彈出子窗口文本框的值...2006-06-06
本章主要是解決無界微前端環(huán)境下element-ui彈框偏移問題，如果你用的是其他微前端框架，且提供了jsloader這種預處理器，則可以舉一反三解決同樣的問題2023-08-08
這篇文章主要介紹了微信小程序 slider 詳解及實例代碼的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了JavaScript數據類型對函數式編程的影響示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02