使用JavaScript怎樣操作css

發(fā)布時(shí)間：2020-10-26 14:07:56 來(lái)源：億速云閱讀：144 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

本篇文章給大家分享的是有關(guān)使用JavaScript怎樣操作css，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

原本應(yīng)該是由css進(jìn)行控制html中的div的寬高和背景顏色，但是在下方使用了JavaScript進(jìn)行重新調(diào)用了div盒子，并且覆蓋了css原本的屬性?xún)?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

以上就是使用JavaScript怎樣操作css，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

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

使用JavaScript怎樣操作css

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽