JavaScript 之 DOM [ 樣式操做 ]
樣式操做
描述
- JavaScript 能夠經過 DOM 對 CSS 的樣式進行操做
元素屬性操做
-
Element對象能夠對屬性進行操做css
- getAttribute：表示獲取指定元素的屬性值
- setAttribute：表示對指定元素進行添加屬性 - 先寫屬性名，在寫屬性值
- removeAttribute：表示對指定元素的指定屬性進行刪除
<body>
<div id="d1">
<p>手機</p>
<p id="p2">手錶</p>
<p>電腦</p>
</div>
<script>
/*
Element對象也能夠對屬性進行操做
getAttribute：表示獲取指定元素的屬性值
setAttribute：表示對指定元素進行添加屬性 - 先寫屬性名，在寫屬性值
removeAttribute：表示對指定元素的指定屬性進行刪除
*/
/* 先定位指定元素的位置 */
var p = document.getElementById( 'p2' );
console.log( p );
/* 獲取指定元素的屬性值 */
var ps = p.getAttribute( 'id' );
console.log( ps );
/* 對指定元素添加屬性 - 再添加時，先寫屬性名在寫屬性值 */
p.setAttribute( 'title', '123' );
/* 對指定元素刪除屬性 */
p.removeAttribute( 'title' );
</script>
</body>
獲取內聯樣式
經過節點方式獲取指定目標的CSS樣式
<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
/* 經過節點方式獲取指定目標的CSS樣式 */
/* 定位指定元素節點 */
var div = document.getElementById( 'd' );
/* 獲取指定元素節點的屬性節點 */
var shuxing = div.getAttributeNode( 'style' );
console.log( shuxing );// 顯示 style="width: 200px; height: 200px; border: 1px solid black"
/* 獲取指定屬性節點的屬性值 */
var style = shuxing.nodeValue;
console.log( style );// 顯示 width: 200px; height: 200px; border: 1px solid black
</script>
</body>
經過元素方式獲取指定目標的CSS樣式
<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
/* 經過元素方式獲取指定目標的CSS樣式 */
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 獲取指定元素的屬性 */
var style = div.getAttribute( 'style' );
console.log( style );// 顯示 width: 200px; height: 200px; border: 1px solid black
</script>
</body>
經過HTMLElement對象獲取指定目標的CSS樣式
-
在DOM中HTMLElement對象提供了style屬性html
- 該屬性會返回一個對象 - CSSStyleDeclaration對象
- CSSStyleDeclaration對象封裝了全部CSS的樣式
<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
/*
在DOM中HTMLElement對象提供了style屬性
* 該屬性會返回一個對象 - CSSStyleDeclaration對象
* CSSStyleDeclaration對象封裝了全部CSS的樣式
*/
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 獲取指定元素的屬性樣式 */
var style = div.style;
console.log( style );// 顯示 CSSStyleDeclaration{... ...}
/* 獲取指定屬性的屬性值 */
console.log( style.width );// 顯示 200px
</script>
</body>
獲取外聯樣式
<head>
<meta charset="UTF-8">
<title>獲取外聯樣式</title>
<style>
#p1 {
color: red;
}
</style>
</head>
<body>
<p id="p1">我特啊呦賭贏</p>
<script>
/* 能夠先定位<style>標籤的位置 */
var p1 = document.getElementsByTagName( 'style' )[0];
console.log( p1.textContent );
/*
Document對象提供了styleSheets屬性
會獲得StyleSheetList對象（StyleSheetList對象中包含了CSSStyleSheet對象）
*/
var p2 = document.styleSheets;
console.log( p2 );
/*
會獲得CSSStyleSheet對象
該對象提供了全部的CSS樣式（cssRules）
*/
var p3 = p2[0];
console.log( p3 );
/*
會獲得CSSRuleList對象
該對像表示存儲了當前外聯樣式的全部css樣式（CSSStyleRule）
*/
var p4 = p3.cssRules;
console.log( p4 );
/*
CSSStyleRule對象：
cssText - 獲得CSS樣式內容以字符串形式表示
selectorText - 獲得CSS樣式的選擇器
style - 獲得CSSStyleDeclaration對象
*/
var p5 = p4[0];
console.log( p5 );
</script>
</body>
</html>
獲取當前有效樣式
- 獲取當前有效樣式要注意樣式的優先級別
window.getComputedStyle()
- 能夠獲取指定元素的當前有效樣式（有瀏覽器兼容問題）
currentStyle
- 能夠做用在IE8版本的瀏覽器
<body>
<p id="p1" style="color: red">啊啊啊啊啊啊</p>
<script>
/*
獲取當前有效樣式 - 注意樣式的優先級別
window.getComputedStyle()：能夠獲取指定元素的當前有效樣式（有瀏覽器兼容問題）
currentStyle：能夠做用在IE8版本的瀏覽器
*/
var p = document.getElementById( 'p1' );
/* 獲取指定元素的當前有效樣式 */
var p1 = window.getComputedStyle( p );
console.log( p1.color );
var p2 = p.currentStyle;
/* 解決兼容問題 */
if ( window.getComputedStyle ) {
var p1 = window.getComputedStyle( p );
console.log( p1.color );
} else {
var p2 = p.currentStyle;
console.log( p2.color );
}
</script>
</body>
設置內聯樣式
經過Element對象對屬性進行設置
<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
/* 經過Element對象對屬性進行設置 */
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 經過setAttribute屬性對指定元素的屬性進行設置 */
div.setAttribute('style','width: 400px;height: 400px;border: 1px solid black');
</script>
</body>
經過HTMLElement對象對屬性進行設置
<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
/* 經過HTMLElement對象對屬性進行設置 */
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 經過style屬性對指定元素的屬性進行設置 */
var style = div.style;
style.width = '600px';
</script>
</body>
class屬性
Element對象class屬性
- 能夠用來獲取指定元素的屬性，也能夠對指定元素進行設置
<head>
<meta charset="UTF-8">
<title>class屬性的操做</title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: lightcoral;
}
.d2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="d" class="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad, asperiores delectus deleniti dicta eligendi exercitationem, fuga ipsa ipsam minus neque nihil non officiis provident, quidem quis reprehenderit velit vitae.</div>
<script>
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 經過Element對象提供的方法來對class屬性進行設置 */
/* 獲取指定元素的class屬性 */
var attr = div.getAttribute('class');
console.log(attr);
/* 對class屬性進行設置 */
div.setAttribute('class','d2');
</script>
</body>
className屬性
<head>
<meta charset="UTF-8">
<title>class屬性的操做</title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: lightcoral;
}
.d2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="d" class="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad, asperiores delectus deleniti dicta eligendi exercitationem, fuga ipsa ipsam minus neque nihil non officiis provident, quidem quis reprehenderit velit vitae.</div>
<script>
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 經過className來獲取指定元素的class屬性 */
var className = div.className;
console.log( className );// 顯示 d1(class屬性值)
/* 改變class的屬性值 */
div.className = 'd2';
</script>
</body>
classList屬性
<head>
<meta charset="UTF-8">
<title>class屬性</title>
<style>
.p1 {
color: red;
}
.p2 {
background-color: silver;
}
.p3 {
color: green;
}
</style>
</head>
<body>
<p class="p1">我特啊呦賭贏</p>
<script>
/*
能夠經過classList屬性和如下方法來對指定元素的設置
add()：表示添加指定屬性值
remove()：表示刪除指定屬性值
toggle()：表示切換指定的屬性值
contains()：表示檢測指定屬性值是否存在 - 存在爲true，不存在爲false
*/
var ps = p.classList;
console.log( ps );
ps.add( 'p2' );
ps.remove( 'p1' );
ps.toggle( 'p3' );
ps.contains( 'p2' )
</script>
</body>
獲取寬和高
- 能夠分爲：獲取元素的寬和高、獲取內容區的寬和高、獲取滾動部分的寬和高
<head>
<meta charset="UTF-8">
<title>獲取寬和高</title>
<style>
#d1 {
width: 100px;
height: 100px;
background-color: red;
padding: 50px;
margin: 50px;
border: 20px solid black;
overflow: auto;
}
#d2 {
width: 500px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<script>
/*
獲取元素的寬度和高度
元素的寬和高（內邊距加內容區）：
寬度 clientWidth = css樣式的寬度 + 內邊距（兩邊） - 滾動條的寬度
高度 clientHeight = css樣式的高度 + 內邊距（兩邊） - 滾動條的高度
內容區的寬和高：
寬度 scrollWidth = 內容的寬度 + 內邊距（單邊）
高度 scrollHeight = 內容的高度 + 內邊距（單邊、設置內容溢出是兩邊）
滾動部分的寬和高 - 內容的寬高超出元素的寬高
寬度 scrollLeft = 內容的寬度 - 元素的寬度
高度 scrollTop = 內容的高度 - 元素的高度
*/
/* 定位指定元素的位置 */
var d = document.getElementById( 'd1' );
console.log( d );
/* 獲取指定元素的寬和高 */
console.log( d.clientWidth, d.clientHeight );
/* 獲取指定元素中內容區的寬和高 */
console.log( d.scrollWidth, d.scrollHeight );
/* 獲取指定元素滾動條的滾動部分的寬和高 */
console.log( d.scrollLeft, d.scrollTop );
/* 經過鼠標事件來獲取動態值 */
d.onscroll = function () {
console.log( d.scrollLeft, d.scrollTop );
}
</script>
</body>
相關文章
- 1. 【JavaScript】DOM之樣式操做
- 2. JavaScript DOM 樣式操做
- 3. Dom--樣式操做
- 4. JavaScript的DOM操做表格及樣式
- 5. javascript之DOM操做
- 6. JavaScript操做Dom
- 7. JavaScript Dom 操做
- 8. JavaScript操做DOM
- 9. JavaScript-DOM操做
- 10. JavaScript 之 DOM [ 表單操做 ]
- 更多相關文章...
- • Web 品質 - 樣式表 - 網站品質教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • 委託模式
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章