JavaScript 学习笔记——cssText

JavaScript 学习笔记——cssText平常编写代码,更改一个元素样式的时候,自己都是用obj.style.width=”200px”;obj.style.position=”absolute”;obj.style.left=”100px”;之类的代码进行设置,这样的话如果更改样式很多的时候,就要写很多代码,难道不能像Jquery那样使用$(obj).css(……);这样进行设置么?于是自己搜了下使用Javascript批

大家好,又见面了,我是你们的朋友全栈君。

平常编写代码,更改一个元素样式的时候,自己都是用

obj.style.width = "200px";
obj.style.position = "absolute";
obj.style.left = "100px";

之类的代码进行设置,这样的话如果更改样式很多的时候,就要写很多代码,难道不能像Jquery那样使用$(obj).css(……);这样进行设置么?

于是自己搜了下使用Javascript批量修改样式的方法。于是看到这篇文章,原来是有一个 cssText 属性的,看来自己的基础知识掌握的还并不充分呐

在w3school中查询了下用法

它是一组样式属性及其值的文本表示。这个文本格式化为一个 CSS 样式表,去掉了包围属性和值的元素选择器的花括号。

将这一属性设置为非法的值将会抛出一个代码为 SYNTAX_ERR 的 DOMException 异常。当 CSS2Properties 对象是只读的时候,试图设置这一属性将会抛出一个代码为 NO_MODIFICATION_ALLOWED_ERR 的DOMException 异常。

cssText 的使用    

obj.cssText = " width:200px;position:absolute;left:100px;";

正如那篇文章所提cssText会清除之前元素含有的样式,所以得使用

obj.cssText += " width:200px;position:absolute;left:100px;";

但是在IE中的最后一个分号会被删除

obj.cssText += " ;width:200px;position:absolute;left:100px;"; //这样便能解决在IE中出现的问题了

可这样代码也显得有些麻烦(起码在我自己看来),于是又找了找其他方法

//使用JSON
function setStyle(obj,json){ 
   
    for(var i in json)
    {
        obj.style[i]=json[i];
    }
}

使用的时候直接

setStyle(obj,{ 
   width : '200px'; position : 'absolute'; left : '100px';});

自我感觉这样方法倒是挺不错

非原创,只是怕自己看到的东西忘记了,存在这里,随时查看 :),笔记嘛,哈哈

原文:http://rguanghui.sinaapp.com/2013/02/26/javascript_study_note_csstext/

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/159230.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • mac 亿图11 激活码-激活码分享

    (mac 亿图11 激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月27日
  • 关于jmeter面试问题_前端面试一问三不知怎么办

    关于jmeter面试问题_前端面试一问三不知怎么办1.解释什么是jmeter?  jmeter是一款java开源工具,用于性能负载测试。它旨在分析和衡量web应用程序和各种服务的性能和负载功能行为。2.说明jmeter的工作原理?  jmeter就像一群将请求发送到目标服务器的用户一样。它收集来自目标服务器的响应以及其他统计数据,这些统计数据通过图形或表格显示应用程序或服务器的性能。3.说明可以在哪里使用函数和变量?  变量和…

    2022年9月30日
  • oracle数据库迁移到新服务器_oracle库对库迁移数据

    oracle数据库迁移到新服务器_oracle库对库迁移数据一、创建用户1.1步骤1.2注意事项二、处理空表(1)描述Oracle11g中的新特性,当一个表中的数据为0时不分配segment,所以就不能够被导出。(2)解决方法方法一:先insert一条数据,再rollback就产生segment了,该方法是在空表中先插入一条数据,再删除就产生segment了,执行exp或者expdp时就可以导出了此空表了。方法二:修改deferred_segment_creation参数,该参数默认为TRUE,当修改为F..

    2022年10月21日
  • ceil与intval区别

    ceil与intval区别

    2021年10月12日
  • 未能连接一个windows服务器,Win7出现未能连接一个Windows服务的解决办法

    未能连接一个windows服务器,Win7出现未能连接一个Windows服务的解决办法近日有网友“所爱隔山海”Win7电脑在开机的时候遇到了开机很慢,开机后提示:未能连接一个Windows服务。如果遇到电脑出现未能连接一个Windows服务该如何解决呢?这就是小编今天要分享的一个电脑小技巧。Win7出现“未能连接一个Windows服务”错误提示,主要是由于电脑系统中的“SystemEventNotification”服务没有正常开启导致的,可能是用户在使用一些第三方安全软件优化…

    2022年5月14日
  • 如何获取uuid_uuid是怎么生成的

    如何获取uuid_uuid是怎么生成的item.id=UUID.randomUUID().toString();

    2022年8月10日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号