快捷導(dǎo)航

JavaScript如何操作css

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

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

原本應(yīng)該是由css進行控制html中的div的寬高和背景顏色，但是在下方使用了JavaScript進行重新調(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)簽體中可以書寫 -->
<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 的元素，把它放到一個變量中,這個過程可以理解為將右側(cè)的結(jié)果賦值給左側(cè)
 var t = document.getElementById('txt');
 // t就是變量名稱，代表著html的盒子所在位置
 
 // 將盒子的樣式中的寬度設(shè)置為300像素
 t.style.width='300px';
 // 將盒子的樣式中的高度設(shè)置為300像素
 t.style.height='300px';
 // 將盒子的樣式中的背景色設(shè)置橘黃色
 t.style.background='orange';

</script>

運行后的效果圖如下:

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

您可能感興趣的文章:

相關(guān)文章

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