欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)簽體中可以書寫 -->
<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就是變量名稱，代表著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)文章

最新評(píng)論