获取内联样式

1
<p id="p1" style="color: red;">666</p>
  1. 内联样式即写在标签里的样式（返回文本类型）
1
2
var pElement = document.getElementById('p1').getAttribute('style')
console.log(pElement)
  1. 通过DOM对象获取。（返回对象）
1
2
var pElement = document.getElementById('p1')
console.log(pElement.style)

对象的方法如下：

  • cssText

    声明块的文本内容

  • length

    属性数量

  • item()

    属性名

  • getPropertyValue()

    属性值

获取外联样式

1
2
var stylesheetList = document.styleSheets
console.log(stylesheetList)

其中CSSRule对象包含一组css规则

可以修改href文件实现更换全局样式。

获取当前有效样式

1
2
var i = document.getElementsByTagName('input')[0]
console.log(window.getComputedStyle(i))

返回结果为CSSStyleDeclaration

IE 8 之前版本不支持getComputedStyle属性。可以使用currentStyle属性代替。

设置内联样式

  1. 直接通过currentStyle

    1
    2
    3
    4
    5
    <div id="box" class="box">test</div>
    <script>
        var box = document.getElementById('box');
        box.style = 'color:red;'
    </script>

    这种方式定义CSS样式，是字符串类型。并不适用于定义过多的CSS样式属性。

  2. 通过调用element.setAttribute()方式调用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div id="box" class="box">test</div>
    <div id="box1" class="box" style="color: red;">移除元素测试</div>
    <script>

        var box = document.getElementById('box');
        var box1 = document.getElementById('box1');

        // 添加属性
        box.setAttribute('style', 'color:red')
        // 删除属性
        box1.removeAttribute('style')
    </script>

  3. 通过style的方法(setProperty removeProperty)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div id="box" class="box">test</div>
    <div id="box1" class="box" style="color: red;">移除元素测试</div>
    <script>

        var box = document.getElementById('box');
        var box1 = document.getElementById('box1');
        // 添加属性
        box.style.setProperty("color", "red")
        // 移除属性
        box1.style.removeProperty('color')
    </script>

设置class样式

  1. Element对象的className属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
        .red {
            color: red;
        }
    </style>
    <body>
        <p id="test" class="test">这是一个test</p>
        <script>
            var test = document.getElementById('test')
            console.log(test.className)
            test.className = 'red'
        </script>
    </body>

  2. Elememnt对象的classList属性

    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
    <style>
        .red {
            color: red;
        }
    </style>
    <body>
        <p id="test1" class="test">this is a test1</p>
        <p id="test2" class="red test">this is a test2</p>
        <p id="test3-1" class="test">this is a test3-1</p>
        <p id="test3-2" class="test red">this is a test3-2</p>
        <p id="test4" class="test">this is a test4</p>
        <script>
            // 获取class为test的全部标签
            var tests = document.getElementsByClassName("test")
            // 为第一个p标签添加class名 red
            tests[0].classList.add('red')
            // 删除第二个标签class内的red
            tests[1].classList.remove('red')
            // 如果存在就删除，不存在就添加
            tests[2].classList.toggle('red')
            tests[3].classList.toggle('red')
            // 检查元素class是否含有red
            console.log(tests[4].classList.contains('red'))
            // 输出索引对应的类型
            console.log(tests[3].classList.item(0))
        </script>
    </body>

    image-20200422185955480

    方法名描述
    add()添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略
    remove()删除指定的类值
    item()按集合中的索引返回类值
    toggle()切换指定的类值
    contains()检查元素的类属性中是否存在指定的类值

Element对象的样式属性

  • clientWidth

    width+padding-滚动条的宽度（如果存在）

  • clientHeight

    height+padding-滚动条的高度（如果存在的话）

  • scrollWidth

    返回元素内容区的宽度和元素本身宽度中更大的值

  • scrollHeight

    表示元素内容的高度。包含overflow样式属性导致不可见的内容区

  • scrollLeft

    表示滚动条到元素左边的距离。默认值0

  • scrollTop

    表示滚动条到元素顶部的距离。默认值0

  1. 判断元素是否滚动到底部

    element.scrollHeight - element.scrollTop === element.clientHeight

  2. 获取指定元素的定位父元素

    element.offsetParent

    作为返回值的 parentObj表示一个指向最近的包含该元素的定位元素
    注意：如果祖先元素中没有开始定位，则 offsetParent为body元素。