转行学开发，代码100天——2018-04-11

通过JavaScript获取和修改HTML元素及CSS属性是其一个基本功能。对于CSS样式通常有行内样式，外部样式，内嵌样式之分。

如：

行内样式：

    <div id="box" style="width: 100px;height: 100px;background:#ccc"></div>

外部样式：

<link rel="stylesheet" type="text/css" href="ccss.css">

内嵌样式：

<style type="text/css">

#div{width:100px;height:100px;background:red;}

</style>

对于样式的获取也因其写入方式不同而有所区别：

对于行内样式的获取，用  obj.style.属性方式

如下面的一个获取和修改行内样式的案例：

<!DOCTYPE html>

<html>

<head>

    <title>JavaScript获取样式的方式</title>

    <script type="text/javascript">

        //css样式获取和修改方法，两个参数时，获取；三个参数时修改

        function css(obj){

            alert(arguments[0]);

            if (arguments.length==2) {

                return arguments[0].style[arguments[1]];

            }else

            {

                arguments[0].style[arguments[1]] = arguments[2];

            }

        }

        //封装获取元素方法

        function $(id){return document.getElementById(id);}

        window.onload =function () {

            var box = $('box');

            alert(css(box,"width"));//获取

            css(box,"width","200px");//设置属性

        }

    </script>

</head>

<body>

    <div id="box" style="width: 100px;height: 100px;background:#ccc"></div>

</body>

</html>

通过css函数技能获取样式也能修改样式，其前提是基于获取的HTML对象obj

   function css(obj){

            alert(arguments[0]);

            if (arguments.length==2) {

                return arguments[0].style[arguments[1]]; //获取样式

            }else

            {

                arguments[0].style[arguments[1]] = arguments[2]; //修改样式

            }

        }

为了使用方便，提升函数的通用性，可以将该函数进一步优化，增加obj,name,value参数

    //css样式获取和修改方法，两个参数时，获取；三个参数时修改

        function css(obj,name,value){

            // alert(arguments[0]); //arguments[0]=obj

            if (arguments.length==2) {

                return obj.style[name];  //获取样式

            }else

            {

                obj.style[name] = value;  //修改样式

            }

        }

非行间样式：obj.style.属性  方式并不适用与非行间样式

“好东西一般不兼容”

在用currentStyle() 与getComputedStyle() 获取非行间样式时需要考虑兼容性问题，而浏览器的兼容性问题一般都是通过if..else条件语句实现。

obj.currentStyle[attr] 兼容IE6、7、8 
getComputedStyle(obj,false)[attr] 不兼容IE6、7、8

    //获取样式

        function getStyle(obj){

            alert(obj.currentStyle);//考虑兼容性问题

            if (obj.currentStyle) {

                alert(obj.currentStyle.width);

            }else{

                alert(getComputedStyle(obj,false).width);

            }

        }

优化该函数后如下：

    //获取样式

        function getStyle(obj,name){

            // alert(obj.currentStyle);//考虑兼容性问题

            if (obj.currentStyle) {

                return obj.currentStyle[name];

            }else{

                return getComputedStyle(obj,false)[name];

            }

        }

但是currentStyle() 与getComputedStyle() 方式只能用于获取样式，而不能设置样式

此外：

currentStyle()方式只能获取简单样式（height，width等），不能用于获取复合样式（border,background）等，若需要获取背景颜色，可以用backgroundcolor

 总结：

1.行内样式：obj.style.属性

2.非行内样式:obj.currentStyle[attr] 兼容IE6、7、8 
getComputedStyle(obj,false)[attr] 不兼容IE6、7、8

3.兼容性问题基本上都是通过if...else条件语句实现

4.currentStyle（）方式不能获取复合样式。

day26—JavaScript对CSS样式的获取和修改实践的更多相关文章

  1. 转：jquery操作元素的css样式（获取、修改等等）

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  2. 使用jquery操作元素的css样式（获取、修改等等）

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  3. 原生javascript 获得css样式有几种方法？

    css 样式分为行内样式和 外部样式: 1.javascript 获得行内样式 : 可以使用  ele.style."属性名称"(如果遇到属性名称带有"-", ...

  4. JavaScript对css样式表操作

    CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...

  5. <JavaScript>尺寸类样式的获取

    尺寸类样式的获取 offsetHeight HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数.(content+ ...

  6. JavaScript、CSS样式收集

    JS集: //给from一个名字然后在JavaScript的地方就可以用form的名字来调用form表单里input元素的value属性可以得到值 var val=form_name.input_na ...

  7. Javascript访问css样式信息

    DOM2级样式为style对象定义了一些属性和方法,可以通过这些方法属性来访问或者修改元素的样式信息: 1.cssText:可读写,在读的情况下以字符串形式返回元素的css代码,在写的情况下以字符串形 ...

  8. JavaScript更改css样式

    来源:https://www.w3school.com.cn/js/js_htmldom_css.asp 1, document.getElementById(id).style.property = ...

  9. 配置dataimport时候 如果css样式有问题 要修改index和admin的版本号

随机推荐

  1. css：设置div边框透明+渐变

    写作背景: 觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框.效果图如下: 在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+ ...

  2. .NET MVC Json()处理大数据异常解决方法

    [1-部分原文]: .NET MVC Json()处理大数据异常解决方法 整个项目采用微软的ASP.NET MVC3进行开发,前端显示采用EasyUI框架,图表的显示用的是Highcharts,主要进 ...

  3. Ubuntu解决Nvidia驱动缺失导致的HDMI无法输出问题

    朋友的电脑是联想Y7000,因为Nvidia驱动的问题几次头疼脑大.这次是出现了HDMI在Windows 10下输出正常,而Ubuntu系统下无法输出. 原因分析 如果通过HDMI去连接显示器以后会发 ...

  4. [常用类]Number & Math 类（转载）

    下面的表中列出的是 Number & Math 类常用的一些方法: 序号 方法与描述 1 xxxValue() 将 Number 对象转换为xxx数据类型的值并返回. 2 compareTo( ...

  5. TensorFlow——CNN卷积神经网络处理Mnist数据集

    CNN卷积神经网络处理Mnist数据集 CNN模型结构: 输入层:Mnist数据集(28*28) 第一层卷积:感受视野5*5,步长为1,卷积核:32个 第一层池化:池化视野2*2,步长为2 第二层卷积 ...

  6. Intel MKL函数之 cblas_sgemm、cblas_sgemm_batch

    cblas_sgemm int m = 40; int k = 20; int n = 40; std::vector<float> a(m*k, 1.0); std::vector< ...

  7. union 横向组合

    select sum(zs) zs,sum(zl) zl,sum(ts) ts,sum(lxcbw) lxcbw,sum(bz) bz,sum(sfzqt) sfzqtfrom (select cou ...

  8. 13Ajax和JQuery

    1.Ajax 1.1是什么? “Asynchronous Javascript And XML”(异步JavaScript和XML), 并不是新的技术,只是把原有的技术,整合到一起而已. 1.使用CS ...

  9. 学习旧岛小程序 （5） observer 函数中修改属性的值

    不要在一个属性的 observer  函数中修改属性的值 不然会造成内存泄露 错误代码: properties: { /* 期刊号 */ index: { type: String, observer ...

  10. 37行代码构建无状态组件通信工具-让恼人的Vuex和Redux滚蛋吧！

    状态管理的现状 很多前端开发者认为,Vuex和Redux是用来解决组件间状态通信问题的,所以大部分人仅仅是用于达到状态共享的目的.但是通常Redux是用于解决工程性问题的,用于分离业务与视图,让结构更 ...