获取内联样式

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

对象的方法如下：

  • cssText

    声明块的文本内容

  • length

    属性数量

  • item()

    属性名

  • getPropertyValue()

    属性值

获取外联样式

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

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

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

获取当前有效样式

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

返回结果为CSSStyleDeclaration

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

设置内联样式

  1. 直接通过currentStyle

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

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

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

    <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)

    <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属性

    <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属性

    <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元素。