在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)文章

文字幻燈片
文字幻燈片...
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
競態(tài)條件Race condition及如何避免的三種方案詳解
這篇文章主要為大家介紹了競態(tài)條件Race condition及如何避免的三種方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
帶你理解JavaScript 原型原型鏈
理解js中原型、原型鏈這個概念，絕對是幫助我們更深入學(xué)習(xí)js的必要一步，比如，如果js開發(fā)者想理解js繼承，new關(guān)鍵字原理，甚至封裝組件、優(yōu)化代碼，弄明白js中原型、原型鏈更是前提條件。本篇文章，用最簡潔的文字，清楚明白講解原型鏈相等關(guān)系和原型、原型鏈存在的意義
2021-09-09
父窗口獲取彈出子窗口文本框的值
父窗口獲取彈出子窗口文本框的值...
2006-06-06
微前端下element-ui彈框偏移問題解決
本章主要是解決無界微前端環(huán)境下element-ui彈框偏移問題，如果你用的是其他微前端框架，且提供了jsloader這種預(yù)處理器，則可以舉一反三解決同樣的問題
2023-08-08
微信小程序 slider 詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 slider 詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2017-01-01
JavaScript數(shù)據(jù)類型對函數(shù)式編程的影響示例解析
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)類型對函數(shù)式編程的影響示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02