wangeditor如何获取内容样式_javascript-样式操作

122 阅读 0 评论 81 点赞

我是靠谱客的博主健忘故事，这篇文章主要介绍wangeditor如何获取内容样式_javascript-样式操作，现在分享给大家，希望可以做个参考。

样式操作

获取内联样式

结构如下：

复制代码

1
var value = element.getAttribute('style');

调用gctAttributc。方法的element表示HTML页面元素。
传递的参数style表示属性名称。
返回值则是指定属性名对应的值(内联样式的声明内容)。

复制代码

1
2
3
4
5
6
<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对象。

复制代码

1
2
3
4
5
6
<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声明块的文本内容。

复制代码

1
2
3
4
5
6
7
8
<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]方式进行替换。

复制代码

1
2
3
4
5
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]方式进行替换。

复制代码

1
2
3
4
5
6
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属性，返回该对象的属性的数量。

复制代码

1
2
3
4
5
6
7
8
<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的方式获取具体的样式属性的值。

复制代码

1
2
3
4
<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循环语句进行遍历，或者将其转换为数组。

复制代码

1
2
3
4
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循环语句进行遍历，或者将其转换为数组。

复制代码

1
2
3
4
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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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>

操作外联样式

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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属性值。

复制代码

1
2
var btn = document.getElementById('btn');
console.log(btn.className);

Element 对象的 classList 属性

Element对象的className属性虽然可以获取HTML页面中指定元素的class属性值，但返回值的是字符串类型。如果HTML页面中指定元素的class属性值为多个样式的话，对于我们操作会比较麻烦。

Element对象还提供了classList属性，该属性可以获取HTML页面指定元素的class属性值的列表。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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);

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
例如
<!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属性表示元素内部的宽度和高度，单位为像素。这些属性的值包含内边距，但不包含滚动条、边框和外边距。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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属性返回元素内容区的宽度和元素本身宽度中更大的那个值。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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属性的默认值

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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属性的值为距离目标元素最近的那个祖先元素

最后

以上就是健忘故事最近收集整理的关于wangeditor如何获取内容样式_javascript-样式操作的全部内容，更多相关wangeditor如何获取内容样式_javascript-样式操作内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：wangeditor如何获取内容样式
浏览次数：122 次浏览
发布日期：2023-10-21 06:31:16
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_22_fw_12__7__2_x.html

wangeditor如何获取内容样式_javascript-样式操作

样式操作

获取内联样式

DOM的style属性

CSSText属性

getPtopettyValue()方法

遍历CSSStyleDeclaration 对象

属性链方式操作

获取外联样式

StyleSheetList 对象，

CSSRuleList 对象

获取外联样式例子1

操作外联样式

获取class属性

Element 对象的 classList 属性

获取当前有效样式

currentStyle 属性

Element对象的样式属性

元素内部的宽度和高度

内容区的宽度和高度

获得滚动条的高度和宽度

offsetparent属性

最后

评论列表共有 0 条评论

发表评论取消回复

wangeditor如何获取内容样式_javascript-样式操作

样式操作

获取内联样式

DOM的style属性

CSSText属性

getPtopettyValue()方法

遍历CSSStyleDeclaration 对象

属性链方式操作

获取外联样式

StyleSheetList 对象 ，

CSSRuleList 对象

获取外联样式例子1

操作外联样式

获取class属性

Element 对象的 classList 属性

获取当前有效样式

currentStyle 属性

Element对象的样式属性

元素内部的宽度和高度

内容区的宽度和高度

获得滚动条的高度和宽度

offsetparent属性

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

StyleSheetList 对象，

发表评论取消回复