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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Dynamics Crm 2011 Or 2013 IFD 部署一段时间后,CA验证问题[通俗易懂]

    Dynamics Crm 2011 Or 2013 IFD 部署一段时间后,CA验证问题[通俗易懂]以下错误描述摘自博客:http://blog.csdn.net/qzw4549689/article/details/14451257IFD部署一段时间后,大概一年,突然出现从IFD登录页面登录后,再次弹出要求登录的框,多次输入用户名密码仍然无效,查看日志:><TraceRecordxmlns=”http://schemas.micros…

    2025年7月24日
    1
  • 电商社交数据在大数据风控的应用实践

    电商社交数据在大数据风控的应用实践

    2022年3月3日
    25
  • 项目运行报错Error: Static interface methods are only supported starting with Android N (–min-api 24)

    项目运行报错Error: Static interface methods are only supported starting with Android N (–min-api 24)

    2021年10月1日
    40
  • pycharm怎么安装python_pycharm环境配置教程

    pycharm怎么安装python_pycharm环境配置教程1.pycharm的下载,到pycharm官方网站进行下载点击tools选择自己要下载的pycharm的版本2.下载完成安装以后如图所示:创建一个快捷方式,以便打开3.根据安装的提示一步一步往下走就可以了4.Python下载:4.1到Python官网下载Python我下载的是3.9.6版本的Python4.2安装时记得点击path的那个选项,这样就不用了自己去环境那边配置了4.3安装完成以后,在命令提示行下检查一下是否安装成功…

    2022年8月27日
    2
  • SQL数据库之索引优缺点

    SQL数据库之索引优缺点 SQL数据库之索引使用原则及利弊 索引是对数据库表中一列或多列的值进行排序的一种结构,使用索引可快速访问数据库表中的特定信息。 优点通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。  可以大大加快数据的检索速度,这也是创建索引的最主要的原因。  可以加速表和表之间的连接,特别是在实现数据的参考完整性方面特别有意义。  在使用分组和排序子句进行数据检索时,…

    2022年5月25日
    39
  • 机器人手眼标定Ax=xB(eye to hand和eye in hand)及平面九点法标定[通俗易懂]

    机器人手眼标定Ax=xB(eye to hand和eye in hand)及平面九点法标定[通俗易懂]一、背景Calibration是机器人开发者永远的痛。虽然说方法说起来几十年前就有,但每一个要用摄像头的人都还是要经过一番痛苦的踩坑,没有轻轻松松拿来就效果好的包。机器人视觉应用中,手眼标定是一个非常基础且关键的问题。简单来说手眼标定的目的就是获取机器人坐标系和相机坐标系的关系,最后将视觉识别的结果转移到机器人坐标系下。手眼标定行业内分为两种形式,根据相机固定的地方不同,如果相机和机器…

    2022年4月27日
    95

发表回复

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

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