JavaScript如何操作css

更新時(shí)間：2020年10月24日 16:21:04 作者：newmiracle宇宙

這篇文章主要介紹了JavaScript如何操作css，幫助大家更好的進(jìn)行前端開(kāi)發(fā)，優(yōu)化網(wǎng)頁(yè)，感興趣的朋友可以了解下

原本應(yīng)該是由css進(jìn)行控制html中的div的寬高和背景顏色，但是在下方使用了JavaScript進(jìn)行重新調(diào)用了div盒子，并且覆蓋了css原本的屬性內(nèi)容。

需求目標(biāo):由 100 像素的粉色背景色的div盒子變成了 300像素的橘黃色效果的div盒子

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制css</title>
<style>
 <!-- div是html盒子的元素選擇器 -->
div{
 background:pink;  <!-- 背景色：粉色 -->
 width:100px;  <!-- 寬度：100像素-->
 height:100px;  <!-- 高度：100像素 -->
}
</style>
</head>

<body>
<div id="txt"></div>

</body>
</html>
<!-- JavaScript代碼只能在下面的script的標(biāo)簽體中可以書(shū)寫(xiě) -->
<script>
//方式一:

 //查找到id為div的標(biāo)簽之后 繼續(xù)查找style屬性
 // document.getElementById('txt').style.width='300px';
 // document.getElementById('txt').style.height='300px';
 // document.getElementById('txt').style.background='orange';
 
//方式二:

 //先找到 id 為txt 的元素，把它放到一個(gè)變量中,這個(gè)過(guò)程可以理解為將右側(cè)的結(jié)果賦值給左側(cè)
 var t = document.getElementById('txt');
 // t就是變量名稱(chēng)，代表著html的盒子所在位置
 
 // 將盒子的樣式中的寬度設(shè)置為300像素
 t.style.width='300px';
 // 將盒子的樣式中的高度設(shè)置為300像素
 t.style.height='300px';
 // 將盒子的樣式中的背景色設(shè)置橘黃色
 t.style.background='orange';

</script>

運(yùn)行后的效果圖如下:

以上就是JavaScript如何操作css的詳細(xì)內(nèi)容，更多關(guān)于JavaScript操作CSS的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

javascript設(shè)計(jì)模式 – 觀察者模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 觀察者模式,結(jié)合實(shí)例形式分析了javascript觀察者模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法
這篇文章主要給大家介紹了關(guān)于JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
淺談JavaScript之事件綁定
關(guān)于 JavaScript 的事件綁定在網(wǎng)上已經(jīng)有不少相關(guān)的資料了，今天這篇文章也是在被同事問(wèn)及的時(shí)候才順便把它記錄下來(lái)，算是 JavaScript 事件綁定中的一個(gè)小技巧，如果能在工作中善加利用，會(huì)有出其不意的效果
2013-07-07
JavaScript中數(shù)組對(duì)象的那些自帶方法介紹
數(shù)組對(duì)象自帶方法想必大家都有所耳聞,今天主要為大家介紹下JavaScript中數(shù)組對(duì)象的那些自帶方法，感興趣的你可以參考下哈，希望可以幫助你學(xué)習(xí)javascript
2013-03-03
小程序自定義彈出框效果
這篇文章主要為大家詳細(xì)介紹了小程序自定義彈出框效果，支持淡入淡出動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
js實(shí)現(xiàn)按Ctrl+Enter發(fā)送效果
按Ctrl+Enter發(fā)送，思路是監(jiān)聽(tīng)textarea的onkeydown事件，當(dāng)ctrl鍵被按下，并且，keycode為13（回車(chē)），時(shí)，調(diào)用發(fā)送表單的函數(shù)
2014-09-09
在JavaScript中終止forEach循環(huán)的三種方式
如何終止forEach循環(huán)這個(gè)問(wèn)題估計(jì)會(huì)難倒一部分同學(xué),甚至?xí)腥朔磫?wèn),forEach循環(huán)在JavaScript中能終止嗎？本文小編給大家介紹了三種方式可以終止forEach循環(huán),需要的朋友可以參考下
2023-11-11
使用JavaScript 實(shí)現(xiàn)的人臉檢測(cè)
這篇文章主要介紹了使用JavaScript 實(shí)現(xiàn)的人臉檢測(cè)的方法和實(shí)例，非常的不錯(cuò)，這里推薦給大家，有需要的小伙伴參考下。
2015-03-03
JavaScript offset實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)
在頁(yè)面開(kāi)發(fā)時(shí)我們少不了各種鼠標(biāo)交互動(dòng)作，那么JavaScript中如何實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)，本文就詳細(xì)的介紹一下，感興趣的可以了解一下
2021-05-05
JavaScript設(shè)計(jì)模型Iterator實(shí)例解析
這篇文章主要介紹了JavaScript設(shè)計(jì)模型Iterator實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-01-01