js如何設(shè)置css高度

發(fā)布時(shí)間：2021-05-14 11:42:31 來(lái)源：億速云閱讀：414 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了js如何設(shè)置css高度，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

js設(shè)置css高度的方法：1、通過(guò)js修改html文件中div的style中值來(lái)修改div的高度；2、使用js修改CSS文件中的div的height的值。

本文操作環(huán)境：Windows7系統(tǒng)、javascript1.8.5&&HTML5&&CSS3版、Dell G3電腦。

js如何給div設(shè)置高度?

首先打開(kāi)我們測(cè)試的編輯工具我這里使用的是Eclipse

我們新建一個(gè)測(cè)試項(xiàng)目然后新建一個(gè)index.html、basic.js和basic.css文件

js如何設(shè)置css高度

第一種方法是js修改html文件中div的style中值來(lái)修改div的高度 HTML文件中的文件代碼如圖所示

js如何設(shè)置css高度

運(yùn)行之后我們看到兩個(gè)div的高度是一樣的接下來(lái)我們就使用js修改高度

js如何設(shè)置css高度

這時(shí)我們敲js中的代碼獲取div1的id 使用css屬性對(duì)應(yīng)的style屬性然后設(shè)置高度如圖所示

js如何設(shè)置css高度

第二種方法是使用js修改CSS文件中的div的height的值 HTML文件中的代碼如圖所示

js如何設(shè)置css高度

樣式表css文件中的代碼如圖所示運(yùn)行項(xiàng)目之后你會(huì)看到兩個(gè)div的高度是一樣的這里就不測(cè)試了

js如何設(shè)置css高度

然后我們是在js文件中獲取div1的id屬性然后使用obj.style.cssTest來(lái)修改嵌入式的css

js如何設(shè)置css高度

然后運(yùn)行項(xiàng)目之后兩次結(jié)果都是一樣的 div的高度改變了

js如何設(shè)置css高度

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js如何設(shè)置css高度”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡