动态修改DOM 里面的 id 属性的弊端分析

在IE当中，修改id属性对将来的DOM操作没什么不符合标准的影响，你仍然可以通过document.getElementById()找到该元素，然后在CSS支持上就有问题了，id修改后并不会自动去重新匹配CSS规则，因此id修改后不会体现出应有的样式。

因此，进行DOM编程时应该避免修改id属性，如果需要动态改变匹配的CSS规则，就改变class属性吧。我碰到这个问题时也就是尝试通过修改id属性修改唯一匹配某个CSS过滤器的元素，结果发现修改后在IE中完全没有修改，之后改为用class属性实现同样的目的。

赞 (0)

相关推荐

  • 动态修改DOM 里面的 id 属性的弊端分析

    在IE当中,修改id属性对将来的DOM操作没什么不符合标准的影响,你仍然可以通过document.getElementById()找到该元素,然后在CSS支持上就有问题了,id修改后并不会自动去重新匹配CSS规则,因此id修改后不会体现出应有的样式. 因此,进行DOM编程时应该避免修改id属性,如果需要动态改变匹配的CSS规则,就改变class属性吧.我碰到这个问题时也就是尝试通过修改id属性修改唯一匹配某个CSS过滤器的元素,结果发现修改后在IE中完全没有修改,之后改为用class属性实现同样

  • js获取某元素的class里面的css属性值代码

    js获取某元素的class里面的css属性值代码

    用js如何获取div中css的 margin.padding.height.border等.你可能说可以直接用document.getElementById("id").style.margin获取.但是你说的只能获取直接在标签中写的style的属性,无法获取标签style外的属性(如css文件中的属性).而下面方法则两者值都可以获取.实例效果图如下: js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点.getStyle(obj,at

  • js动态修改input输入框的type属性(实现方法解析)

    需要实现的效果:一个输入框,当输入框未获得焦点的时候,value 值为 "密码":当输入框失去焦点的时候,输入内容显示为"*****" <input name="password" type="text" id="showPwd" tabindex="2″ class="input" value="密码" /> 我们很直接会想到下面的js $(&

  • 解决Antd 里面的select 选择框联动触发的问题

    有两个 select框,且这俩select框是关联的,触发select1,select2里面才会有值. 但是现在的问题是这样的: 触发select1,触发select2,再触发select1,此时select2里面的值变成了上次一选中的value 值,而不会被清空. 解决办法: 使用Select 里面的value属性,来进行清空 <Form style={{padding:'20px','boxSizing':'border-box'}}> <FormItem label="套

  • 快速解决js动态改变dom元素属性后页面及时渲染的问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文件的进度,简单实现一共100个文件的话

  • Java通过反射,如何动态修改注解的某个属性值

    Java通过反射,如何动态修改注解的某个属性值

    Java反射动态修改注解的某个属性值 昨晚看到一条问题,大意是楼主希望可以动态得建立多个Spring 的定时任务. 这个题目我并不是很熟悉,不过根据题目描述和查阅相关Spring 创建定时任务的资料,发现这也许涉及到通过Java代码动态修改注解的属性值. 今天对此尝试了一番, 发现通过反射来动态修改注解的属性值是可以做到的: 众所周知,java/lang/reflect这个包下面都是Java的反射类和工具. Annotation注解,也是位于这个包里的.注解自从Java 5.0版本引入后,就成为

  • 动态表单验证的操作方法和TP框架里面的ajax表单验证

    动态表单验证的操作方法和TP框架里面的ajax表单验证

    动态验证的操作方法 function yz() { if(empty($_POST)) { $this->display(); } else { $db=D("Info"); $shu=array( array("Code","require","代号不能为空",0,"regex",3), ); if(!$db->validate($shu)->create()) { echo $db-&

  • javascript动态添加、修改、删除对象的属性与方法详解

    现在介绍如何为一个对象添加.修改或者删除属性和方法.在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为,可以动态添加.修改.删除属性和方法.例如首先使用类Object来创建一个空对象user:var user=new Object(); 1．添加属性这时user 对象没有任何属性和方法,显然没有任何用途.但可以为它动态的添加属性和方法,例如:user

  • 在vue中动态修改css其中一个属性值操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <!--此div的高度取屏幕可视区域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r

  • 如何用JavaScript实现动态修改CSS样式表

    看过我写的<用JavaScript动态建立或增加CSS样式表的实现方法>之后,你就很容易想明白如何修改CSS样式表了. 正好今天在论坛碰到一位朋友问这样的一个问题: <style> .ls{width=120px;} </style> <script> //在这里加一句来改变.ls中width的值,如何写 </script> 有的朋友回答:"如果使用.ls的对象很多的话,用JS确实不方便, jquery方便,$(".ls&qu

随机推荐