资讯专栏INFORMATION COLUMN

javascript 动态修改css样式

sevi_stuo / 1259人阅读

摘要:方法一改变外联文件,这里不讲这个。方法二通过改变来改变样式,语法或者方法三使用,语法这个方法优点可以这样添加好几个属性。最后一个知识点,就是有一张大图,通过控制来实现显示大图的某一部分。可以用来制作动画。优点是减少请求,缺点是定位麻烦。

方法一:改变外联css文件,这里不讲这个。

方法二:通过改变claaName来改变样式,语法:

obj.className = "style2";

//或者

obj.setAttribute("class", "style2");

方法三:使用obj.style.cssTest,语法:

 obj.style.cssText = " display:block; color:White;“

这个方法优点:

             可以这样添加好几个属性。

缺点:会把obj原来的cssText清掉,解决方案:使用累加,语法:

obj.style.cssText += " display:block; color:White;“

上面cssText累加的方法在IE中是无效的。

然而,可以在前面添加一个分号来解决这个问题:

 obj.style.cssText += " ; display:block; color:White;“

注意:如果前面有样式表文件写着 div { text-decoration:underline; },这个会被覆盖吗?不会!因为它不是直接作用于 HTML 元素的 style 属性。

方法四: 使用obj.style.backgroundColor,语法:

obj.style.backgroundColor= "black";

注意:backgroundColor可以换成其他属性,这里仅是示例,比如color,position等。

 

 

最后一个知识点:css Sprite,

就是有一张大图,通过控制background-position来实现显示大图的某一部分。可以用来制作动画。这个大图是作为background-image:。

优点是减少http请求,缺点是定位麻烦。维护麻烦。

具体用法请移步:https://blog.csdn.net/u011349149/article/details/24181675

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2157.html

相关文章

  • JQuery基础修炼-样式

    摘要:具有相同的父元素,并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度,是大于零。元素的或被认为是可见的,因为他们仍然占用空间布局。 jQuery对象转化成DOM对象     jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

    _Dreams 评论0 收藏0
  • JQuery基础修炼-样式

    摘要:具有相同的父元素,并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度,是大于零。元素的或被认为是可见的,因为他们仍然占用空间布局。 jQuery对象转化成DOM对象     jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

    luck 评论0 收藏0
  • 杂谈 CSS IN JS

    摘要:缺乏高级编程特性影响同样深远,社区发展的预处理器能够有效缓解,,,殊途同归,异军突起,基本实现变量嵌套变量混合扩展和逻辑等。 前言 关注点分离(separation of concerns)原则多年来大行其道,实践中一般将 HTML、CSS、JavaScript 分开编写维护,早期框架 angularjs 即是如此,直到 React 争议中问世,引领关注点混合趋势,驱使开发者重新审视 ...

    Nosee 评论0 收藏0
  • CSS变量(自定义属性)使用指南 — SitePoint

    摘要:预处理器可以让你设置变量,并且在函数循环和数学操作等中使用。不同之处在于变量是运行在浏览器中的动态属性,而预处理器变量会被编译成普通的代码。变量提供了更多可能性但这并不是说你需要在二者之间选择其一你可以同时使用变量和预处理器变量的强大功能。 CSS预处理器,如Sass和Less,使得CSS代码易于组织和维护。通过提供变量、混合、循环等特性,使得CSS具有动态编写的能力,从而减少重复性工...

    light 评论0 收藏0
  • CSS变量(自定义属性)使用指南 — SitePoint

    摘要:预处理器可以让你设置变量,并且在函数循环和数学操作等中使用。不同之处在于变量是运行在浏览器中的动态属性,而预处理器变量会被编译成普通的代码。变量提供了更多可能性但这并不是说你需要在二者之间选择其一你可以同时使用变量和预处理器变量的强大功能。 CSS预处理器,如Sass和Less,使得CSS代码易于组织和维护。通过提供变量、混合、循环等特性,使得CSS具有动态编写的能力,从而减少重复性工...

    yankeys 评论0 收藏0

发表评论

0条评论

sevi_stuo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<