wangeditor如何获取内容样式_javascript-样式操作
样式操作
获取内联样式
结构如下：
var value = Attribute('style');
调⽤gctAttributc。⽅法的element表⽰HTML页⾯元素。
传递的参数style表⽰属性名称。
返回值则是指定属性名对应的值(内联样式的声明内容)。
<p id="p1" >
这是⼀个段落内容.</p>
<script>
var pElem = ElementById('p1');
var style = Attribute('style'); console.log(style);
</script>
DOM的style属性
由于DOM规范标准中将Document对象定位的HTML页⾯元素解析为相应的对象，⽽这些对象都继 承于HTMLElement对象。该对象提供了style属性，返回CSSStyleDeclaration对象。
<p id="p1" >这是⼀个段落内容.</p>
<script>
var pElem = ElementById('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()返回属性：如:PropertyValue('color')
CSSText属性
通过element.style.cssText属性获取CSS声明块的⽂本内容。
<p id="p1" >这是⼀个段落内容.</p>
<script>
var pElem = ElementById('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.PropertyValueO获取CSS的样式属性值，这种⽅式也可以通过 element.stylefpropertyName]⽅式进⾏替换。
for ( var i=0; i<styleDeclar.length; i++ ){
var propertyName = styleDeclar.item(i);
var value1 = PropertyValue(propertyName);
var value2 = pElem.style[propertyName];
console.log( 'getPropertyValue()⽅法：'+ value1, 'style[attrName]: ' + value2);
}
遍历CSSStyleDeclaration 对象
由于CSSStyleDeclaration对象具有length属性，返回该对象的属性的数量。
<p id="p1" >这是⼀个段落内容.</p> <script>
var pElem = ElementById('p1');
var styleDeclar = pElem.style;
for ( var i=0; i<styleDeclar.length; i++ ){
var propertyName = styleDeclar.item(i);
var propertyValue = PropertyValue(propertyName); console.log(propertyName + ' : ' + propertyValue);
}
</script>
属性链⽅式操作
由于通过element.style返回的是CSSStylcDcclaration对象，所以也可以通过element.style.attrName的 ⽅式获取具体的样式属性的值。
<p id="p1" >这是⼀个段落内容.</p> <script>
var pElem = ElementById('p1');
var style = pElem.style; console.lor);
</script>
获取外联样式
styleSheets 属性
Document 对象的 styleSheets
Document
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
<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对象的属性:
borderbox* selectorText属性: 获取当前声明块中的选择器
* style属性: 获取当前声明块中的样式属性, CSSStyleDeclaration对象
*/
console.log(CSSRuleList[1].selectorText, CSSRuleList[1].style)
</script>
</body>
</html>
操作外联样式
<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 = ElementsByTagName('link')[0]
// 整个页⾯的样式替换, 实际上是通过<link>元素的href属性替换样式⽂件
console.log(linkElement.href)
</script>
</body>
</html>
获取class属性
className 属性
Element 对象的 className
Element
Element对象提供了 className属性⽤于获取HTML页⾯中指定元素的class属性值。
注意：Element对象提供的是className属性，并不是class属性。原因是class在JavaScript中是关键 字。
var cName = elementNodeReference.className;
·
className属性返回值cName表⽰⼀个字符串变量。表⽰当前元素的class属性的值，可以是由空格分隔的多个class属性值。
var btn = ElementById('btn');
console.log(btn.className);
Element 对象的 classList 属性
Element对象的className属性虽然可以获取HTML页⾯中指定元素的class属性值，但返回值的是字 符串类型。如果HTML页⾯中指定元素的class属性值为多个样式的话，对于我们操作会⽐较⿇烦。
Element对象还提供了classList属性，该属性可以获取HTML页⾯指定元素的class属性值的列表。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论