样式操作
获取内联样式
结构如下：
var value = element.getAttribute('style');- 调用gctAttributc。方法的element表示HTML页面元素。
- 传递的参数style表示属性名称。
- 返回值则是指定属性名对应的值(内联样式的声明内容)。
<p id="p1" style="color: lightcoral;font-weight: bolder">
这是一个段落内容.</p>
<script>
var pElem = document.getElementById('p1');
var style = pElem.getAttribute('style'); console.log(style);
</script>DOM的style属性
由于DOM规范标准中将Document对象定位的HTML页面元素解析为相应的对象，而这些对象都继 承于HTMLElement对象。该对象提供了style属性，返回CSSStyleDeclaration对象。
<p id="p1" style="color: lightcoral;font-weight: bolder">这是一个段落内容.</p>
<script>
var pElem = document.getElementById('p1');
var style = pElem.style;
console.log(style);
</script>通过element.style返回的是CSSStylcDcclcircitiofi对象。CSSStylcDcclcircitiofi对象表示一个CSS属性键值 对的集合。
属性或方法描述cssText車声明块的文本内容length物性的数量itemQ返回属性名。 例如：nameString= styleObj.item(O) Alternative: nameString= styleObj[0]getPropertyValue()返回属性:如:valString=styleObj.getPropertyValue('color')
CSSText属性
通过element.style.cssText属性获取CSS声明块的文本内容。
<p id="p1" style="color: lightcoral;font-weight: bolder">这是一个段落内容.</p>
<script>
var pElem = document.getElementById('p1');
var styleDeclar = pElem.style;
var cssText = styleDeclar.cssText; console.log(cssText);
</script>
注意：cssText属性返回的是CSS声明块的文本内容，解析操作时会比较麻烦。通过element.style.item(index)获取CSS的样式属性名，这种方式也可以通过element.style[index]方式进 行替换。
for ( var i=0; i<styleDeclar.length; i++ ){
var itemName = styleDeclar.item(i);
var styleName = pElem.style[i];
console.log( 'item()方法：'+ itemName, 'style[index]: ' + styleName);
}getPtopettyValue()方法
通过element.style.item.getPropertyValueO获取CSS的样式属性值，这种方式也可以通过 element.stylefpropertyName]方式进行替换。
for ( var i=0; i<styleDeclar.length; i++ ){
var propertyName = styleDeclar.item(i);
var value1 = styleDeclar.getPropertyValue(propertyName);
var value2 = pElem.style[propertyName];
console.log( 'getPropertyValue()方法：'+ value1, 'style[attrName]: ' + value2);
}遍历CSSStyleDeclaration 对象
由于CSSStyleDeclaration对象具有length属性，返回该对象的属性的数量。
<p id="p1" style="color: lightcoral;font-weight: bolder">这是一个段落内容.</p> <script>
var pElem = document.getElementById('p1');
var styleDeclar = pElem.style;
for ( var i=0; i<styleDeclar.length; i++ ){
var propertyName = styleDeclar.item(i);
var propertyValue = styleDeclar.getPropertyValue(propertyName); console.log(propertyName + ' : ' + propertyValue);
}
</script>属性链方式操作
由于通过element.style返回的是CSSStylcDcclaration对象，所以也可以通过element.style.attrName的 方式获取具体的样式属性的值。
<p id="p1" style="color: lightcoral;font-weight: bolder">这是一个段落内容.</p> <script>
var pElem = document.getElementById('p1');
var style = pElem.style; console.log(style.color);
</script>获取外联样式
Document 对象的 styleSheets 属性
Document对象提供了styleSheets属性，该属性返回包含所有外联样式表(内嵌样式表和外联样式表) 的集合对象。
var styleSheetList = document.styleSheets;
•作为返回值的styleSheetList是一个由styleSheet对象组成的列表，每个styleSheet对象表示HTML页 寥m面中内嵌样式表或外联样式表。
console.log(document.styleSheets);
StyleSheetList 对象 ，
Document对象的styleSheets属性返回的是一个StyleSheetList对象。该对象是一个类数组对象，可以 通过for循环语句进行遍历，或者将其转换为数组。
var StyleSheetList = document.styleSheets;
for (var i=0; i<styleSheetList.length; i++){ console.log(styleSheetList[i]);
}
注意：StyleSheetList对象本身不能使用数组方法进行操作。CSSStyleSheet对象表示一个CSS样式表(内嵌样式表或外联样式表)。CSSStyleSheet实现了更为通 用的StyleSheet,也从其父级StyleSheet继承了属性和方法。
CSSRuleList 对象
CSSStyleSheet对象的cssRules属性返回的是一个CSSRuleList对象。该对象是一个类数组对象，可以 通过for循环语句进行遍历，或者将其转换为数组。
var styleSheet = document.styleSheets[0];
var cssRuleList = styleSheet.cssRules; for(var i=0; ivcssRuleList.length; i++){
var cssRule = cssRuleList[i]; console.log(cssRule);
}获取外联样式例子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取外联样式</title>
<link rel="stylesheet" href="style.css">
<style>
body {
margin: 0;
}
p {
color: lightsalmon;
font-size: 24px;
font-weight: 700;
}
</style>
</head>
<body>
<p>这是一个用于测试的文本内容.</p>
<script>
// Document对象的styleSheets属性: 获取当前HTML所有的外联样式, StyleSheetList对象(类数组对象)
var styleSheetList = document.styleSheets
console.log(styleSheetList)
// 通过索引值的方式得到某个外联样式, CSSStyleSheet对象
var CSSStyleSheet = styleSheetList[1]
console.log(CSSStyleSheet)
// 通过CSSStyleSheet对象的cssRules属性或rules属性得到具体的样式, CSSRuleList对象
var CSSRuleList = CSSStyleSheet.cssRules
// 得到外联样式中某个声明块, CSSStyleRule对象
console.log(CSSRuleList[1])
/*
CSSStyleRule对象的属性:
* selectorText属性: 获取当前声明块中的选择器
* style属性: 获取当前声明块中的样式属性, CSSStyleDeclaration对象
*/
console.log(CSSRuleList[1].selectorText, CSSRuleList[1].style)
</script>
</body>
</html>操作外联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作外联样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>这是一个用于测试的文本内容.</p>
<script>
var linkElement = document.getElementsByTagName('link')[0]
// 整个页面的样式替换, 实际上是通过<link>元素的href属性替换样式文件
console.log(linkElement.href)
</script>
</body>
</html>获取class属性
Element 对象的 className 属性
Element对象提供了 className属性用于获取HTML页面中指定元素的class属性值。
注意：Element对象提供的是className属性，并不是class属性。原因是class在JavaScript中是关键 字。
var cName = elementNodeReference.className;
• className属性返回值cName表示一个字符串变量。表示当前元素的class属性的值，可以是由空格分隔的多个class属性值。
var btn = document.getElementById('btn');
console.log(btn.className);Element 对象的 classList 属性
Element对象的className属性虽然可以获取HTML页面中指定元素的class属性值，但返回值的是字 符串类型。如果HTML页面中指定元素的class属性值为多个样式的话，对于我们操作会比较麻烦。
Element对象还提供了classList属性，该属性可以获取HTML页面指定元素的class属性值的列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class属性</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightsalmon;
}
</style>
</head>
<body>
<div id="box" class="box container">这是一个测试的内容.</div>
<script>
var divElement = document.getElementById('box')
/*
获取class属性对应的类名:
* getAttribute()方法
* className属性
*/
console.log(divElement.getAttribute('class'))
console.log(divElement.className)
// 如果class属性设置多个类名, 利用classList属性获取更方便(只读)
var classList = divElement.classList
console.log(classList)
</script>
</body>
</html>获取当前有效样式
getComputedStyle()方法
Window对象中提供了 getComputedStyleO方法，用于获取指定元素的当前有效样式，得到 CSSStyleDeclaration 对象。
var style = window.getComputedStyle(element, [pseudoElt]);
• element参数表示获取有效样式的指定元素。
• pseudoElt参数是个可选项，指定一个要匹配的伪元素的字符串。 注意：pseudoElt参数必须对普通元素省略(或null)。
• getComputedStyleO方法的返回值是CSSStyleDeclaration对象，表示指定元素的有效样式。
var btn = document.getElementByld('btn');
var style = window.getComputedStyle(btn, null); console.log(style.backgroundColor);
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取当前有效样式</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightpink;
}
</style>
</head>
<body>
<div id="box" style="background-color: lightsalmon;" class="box">这是一个测试内容.</div>
<script>
var divElement = document.getElementById('box')
// 获取当前有效样式 -> CSSStyleDeclaration对象
var style = window.getComputedStyle(divElement)
console.log(style.backgroundColor)
// 如果样式属性值是长度单位的话, 携带单位 -> 如果计算的话, 强转为Number类型
console.log(parseFloat(style.width))
</script>
</body>
</html>currentStyle 属性
由于gctComputcdStylcO方法在IE 8及之前版本的浏览器中并不支持。所以，如果想要在IE 8及之前 版本的浏览器中实现相同功能的话，需要使用currentStyle属性。
var btn = document.getElementById('btn');
var style = btn.currentStyle; console.log(style.backgroundColor);
通过element.currentStyle属性得到currentStyle对象，该对象提供了有关CSS样式表的所有样式属性。
Element对象的样式属性
元素内部的宽度和高度
Element对象的clientWidth和clicntHcight属性表示元素内部的宽度和高度，单位为像素。这些属性 的值包含内边距，但不包含滚动条、边框和外边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取内部的宽度和高度</title>
<style>
.box {
box-sizing: border-box;
width: 200px;
height: 200px;
padding: 50px;
border: 10px solid #000;
margin: 50px;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script>
var box = document.getElementById('box')
/*
获取元素的内部宽度和高度: clientWidth和clientHeight
* 盒子模型:
* content-box: clientWidth=width+padding; clientHeight=height+padding
* border-box: clientWidth=width-border; clientHeight=height-border
* 得到的值是不带单位的
* 是只读属性
*/
console.log(box.clientWidth, box.clientHeight)
</script>
</body>
</html>
内容区的宽度和高度
Element对象的scrollWidth属性表示元素内容的宽度，单位为像素。scrollWidth属性返回元素内容 区的宽度和元素本身宽度中更大的那个值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取内容区的宽度和高度</title>
<style>
.parent {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
.child {
width: 500px;
height: 500px;
background-color: lightpink;
}
</style>
</head>
<body>
<div id="parent" class="parent">
<div id="child" class="child"></div>
</div>
<script>
var parent = document.getElementById('parent')
console.log(parent.scrollWidth, parent.scrollHeight)
</script>
</body>
</html>获得滚动条的高度和宽度
Element对象的scrollLeft属性表示滚动条到元素左边的距离，单位为像素。scrollLeft属性的默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取滚动条滚动的宽度和高度</title>
<style>
.parent {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
.child {
width: 500px;
height: 500px;
background-color: lightpink;
}
</style>
</head>
<body>
<div id="parent" class="parent">
<div id="child" class="child"></div>
</div>
<script>
var parent = document.getElementById('parent')
parent.onscroll = function () {
console.log(parent.scrollLeft, parent.scrollTop)
}
</script>
</body>
</html>offsetparent属性
Element对象的offsetParent属性: 获取目标元素的定位父元素
1.如果目标元素的所有祖先元素都没有开启的话, offsetParent属性的值为<body>元素
2.如果目标元素的祖先元素中只有一个开始定位, offsetParent属性的值为该祖先元素
3.如果目标元素的祖先元素中有多个元素开启定位, offsetParent属性的值为距离目标元素最近的那个祖先元素
扫一扫
3492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
