javaScript(二十）CSS 操作

最新推荐文章于 2019-10-21 20:23:44 发布

李不烦

最新推荐文章于 2019-10-21 20:23:44 发布

阅读量111

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/90699305

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

CSS 操作

1. 操作行内样式

HTML 页面标签的行内样式主要是通过 style 属性进行设置，所以 DOM 操作标签的行内样式也是通过 style 属性来完成的。

1.1 设置行内样式

想改变 HTML 页面标签的行内样式，我们可以通过以下方式实现:

element.style.attrName = attrValue

            var btn1=document.getElementById("btn1");
            btn1.onclick=function () {
				var div1=document.getElementById("div1");
				div1.style.backgroundColor="red";
            }

值得注意的是:

如果设置 CSS 样式时，使用了 !important 预定义的 CSS 样式优先级最高，会导致改变内联样式失效。
在修改例如 background-color 这样的 CSS 属性时，不能使用 element.style.background-color 这种方式，浏览器会解析成 JavaScript 的表达式。最终会报错。
所有例如 background-color 这样的 CSS 属性在使用时，必须要改为驼峰式命名方式（例如 backgroundColor）。

1.2 获取行内样式

获取 HTML 页面标签的行内样式，我们同样可以通过以下方式实现:

var attrValue = element.style.attrName

                var div1=document.getElementById("div1");
                var  backgroundColor=div1.style.backgroundColor;
                console.log(backgroundColor);// red

除了可以用style属性，还可以用DOM属性操作行内样式

1.3 DOM 的属性操作行内样式

设置内联样式: setAttribute('style', CSS 样式内容)
获取内联样式: getAttribute('style')

                     var div1=document.getElementById("div1");
			         div1.setAttribute("style","background-color: black");

                var div1=document.getElementById("div1");
				var bgcolor=div1.getAttribute("style");
				console.log(bgcolor);// background-color: red;

值得注意的是: 通过 getAttribute() 方法获取的内联样式，并不能准确到具体的样式属性值。而是返回所有 CSS 样式内容。

1.4. 获取当前样式

通过 element.style 属性，我们只能获取内联样式内容，并不能获取 CSS 样式（<style></style>标签）内容。我们可以通过如下方法获取 HTML 页面标签的当前样式内容:

var CSSStyleDeclaration = window.getComputedStyle(element, null);
作用 - 获取页面指定标签的当前有效样式；

参数： element - 指定的标签；第二个参数一般情况传递 null

该方法会返回一个包含当前所有的 CSS 样式的对象，我们可以通过 object.attrName 的方式得到指定的样式值。

                                var div1=document.getElementById("div1");
				var CSSStyleDeclaration=window.getComputedStyle(div1,null);
				console.log(CSSStyleDeclaration);
				console.log(CSSStyleDeclaration.backgroundColor);// rgb(135, 206, 250)

IE 8 及之前版本的浏览器并不支持 getComputedStyle() 方法。如果，在 IE 8 及之前版本的浏览器，我们需要使用以下属性实现:

var currentStyle =element.currentStyle;//currentStyle 对象和CSSStyleDeclaration对象类似

提供兼容方案

用户既可能使用 IE 8 及之前的版本，也可能使用 IE 9 及之后的版本，还可能使用其他浏览器。所以，我们在实际开发中，需要提供一个全浏览器兼容的解决方案。

function getStyle(elem, attrName){
    // 判断 window.getComputedStyle() 方法是否存在
    if (window.getComputedStyle){
        return getComputedStyle(elem, null);
    }else{
        return elem.currentStyle[attrName];
    }
}

5. 获取可见宽度和高度

获取 HTML 页面标签的可见宽度和高度的属性如下:

可见宽度: clientWidth
可见高度: clientHeight

我们可以通过如下示例来学习如何获取标签的可见宽度:

       #div1 {
				width: 100%;
				height: 100px;
				padding: 10px;
                                margin: 5px;
				border: solid black 10px;
				background-color: lightskyblue;
				box-sizing: content-box;
			}




        // 获取可见宽度和高度
              var btn1=document.getElementById("btn1");
               btn1.onclick=function () {
                var div1=document.getElementById("div1");
                var clientWidth=div1.clientWidth;
                alert(clientWidth);//868

                var clientHeight=div1.clientHeight;
                alert(clientHeight);//120 =height+padding（没有margin和border的宽度）
            }

6. 获取实际宽度和高度

获取 HTML 页面标签的实际宽度和高度的属性如下:

宽度: offsetWidth
高度: offsetHeight

我们可以通过如下示例来学习如何获取标签的可见宽度:

// 获取实际宽度和高度
    var btn2=document.getElementById("btn2");
        btn2.onclick=function () {
var div2=document.getElementById("div2");
var offsetHeitht=div2.offsetHeight;
console.log(offsetHeitht);// 140=height+padding+border
        }

7. 获取定位父元素

获取 HTML 页面标签的定位父元素:

element.offsetParent；//获取离得最近的父元素，若没有定位的父元素，则获取<body>标签

我们可以通过如下示例来学习如何获取定位父元素:

            // 获取定位父元素

			var btn3=document.getElementById("btn3");
               btn3.onclick=function () {
				   var div3=document.getElementById("div3");
				   var parentEle=div3.offsetParent;
				   console.log(parentEle);
               }

8. 获取滚动相关属性

有关滚动的相关属性如下:

scrollWidth: 获取指定标签滚动区的宽度。
scrollHeight: 获取指定标签滚动区的高度。
scrollLeft: 获取水平滚动条滚动的距离。
scrollTop: 获取垂直滚动条滚动的距离。

今天出门，下着小雨，打着雷，任性没带伞，下公交时，雨很大了，为任性买单，哈哈，下车跑的贼快。

李不烦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript(二十）CSS 操作

CSS 操作1. 操作行内样式HTML 页面标签的行内样式主要是通过 style 属性进行设置，所以 DOM 操作标签的行内样式也是通过 style 属性来完成的。1.1 设置行内样式想改变 HTML 页面标签的行内样式，我们可以通过以下方式实现:element.style.attrName = attrValue var btn1=docum...
复制链接

扫一扫