政府網(wǎng)站建設(shè)規(guī)劃書打開免費(fèi)百度啊
?
目錄
1.style 屬性獲取元素寫在行間的樣式
2.getComputedStyle(元素對象，null)可以獲取元素的非行間樣式?
3.案例（定義一個div和按鈕，每點(diǎn)擊一次按鈕div寬度增加）
效果預(yù)覽圖
代碼實(shí)現(xiàn)
? ?
? ? ? ?在 JavaScript 中，可以通過 DOM（文檔對象模型）操作來訪問和修改網(wǎng)頁上的 CSS 樣式。js提供了靈活的方式來操作和修改 DOM 元素的 CSS 樣式，使網(wǎng)頁開發(fā)者可以根據(jù)需要進(jìn)行樣式的動態(tài)控制和改變。
1.style 屬性獲取元素寫在行間的樣式
通過 元素的 style 屬性，只能獲取元素寫在行間的樣式
通過 元素的style屬性設(shè)置的樣式也是行間樣式
2.getComputedStyle(元素對象，null)可以獲取元素的非行間樣式?
getComputedStyle(元素對象，null)可以獲取元素的非行間樣式
該方法的第一個參數(shù)是要獲取樣式的元素對象，第二個參數(shù)一般寫成null
他的含義是偽類或者偽元素，一旦具有第二個參數(shù)，則表示獲取的是偽類或者偽元素的css樣式。
在ie中，可以使用 currentStyle來獲取元素的樣式? 例如 wp.currentStyle['width']?
let wp = document.querySelector('.wp')console.log(wp.style);console.log(getComputedStyle(wp,null));//獲取wp對象的所有樣式let obj = getComputedStyle(wp,null)console.log(obj.width,obj.height);let obj2 = getComputedStyle(wp,':hover')console.log(obj2.background);// console.log(wp.currentStyle['width']);3.案例（定義一個div和按鈕，每點(diǎn)擊一次按鈕div寬度增加）
效果預(yù)覽圖
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css操作</title><style>*{margin: 0;padding: 0;}.wp{width: 200px;height: 200px;border: 1px #000 solid;}.wp:hover {background: #ff0;}</style>
</head>
<body><div class="wp" ></div><button id="btn">點(diǎn)擊++</button>
</body>
</html>
<script>let btn = document.getElementById('btn')btn.onclick = function(){let i = 5;console.log(getComputedStyle(wp).width);let w = getComputedStyle(wp).widthwp.style.width =parseInt(w)+50+'px' //parseInt保留整數(shù)部分}
</script>