扫码关注官方订阅号
除了不可复用之外, 有什么其他方面的影响?
走同样的路,发现不同的人生
定义了一个DOM元素的ID,则代表以下事情:
http://this.that.web#the_id
#the_id{}
document.getElementById()
条目1意味着从语义上不能出现两个相同的ID;
条目2意味着只要一个可见的元素有ID,就可以构建一个地址,使得进入页面中就能看到这个元素*;
条目3意味着你对这个元素,以及它的后代可以很方便地被选取到。但并不推荐这样的行为,原因在于:
#module_a form
条目4意味着ID对于JS中操作DOM非常重要。重要到何地步呢,这是在每一个浏览器中都能高效地选取到相应元素的方法。
只要正确理解并体现了ID的作用(1、3、4),ID的数量不会成为问题。顶多是你的页面变大了几kb,但对于当前的中国互联网,这几kb并不是性能瓶颈的主要来源,优化一下图片,减少一下连接数,网页的下载速度就能极大地提升。
只要CSS正确地使用类选择器、后代选择器和伪类选择器来匹配相应的样式,ID也不会对CSS造成影响。
说明: * 并不准确,详见http://www.zhangxinxu.com/wordpress/2013/08/url-anchor-html-%E9%94%9A%E7%82%B9%E5%AE%9A%E4%BD%8D%E6%9C%BA%E5%88%B6-%E5%BA%94%E7%94%A8-%E9%97%AE%E9%A2%98/
杞人忧天了,不会有什么影响的。比如一个页面就上百条的评论我们经常这样
<ul> <li id="comment-1"></li> <li id="comment-2"></li> <li id="comment-3"></li> <li id="comment-4"></li> <li id="comment-5"></li> ... </ul>
ID太多的话,有时候CSS样式会因为权重的混乱而产生一些小问题,不过这都是正常的可解决的。。。我认为对于单一出现的比较重要的元素用ID最好,因为无论是CSS还是JS,ID选择器的效率是最高的
看是哪种的过多了,重复的东西当然还是给class样式比较好。 有些时候为了覆盖样式需要加长选择层级或者加新的ID比较蛋疼。 作为JS选择器的话ID倒是不错。 个人愚见。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
定义了一个DOM元素的ID,则代表以下事情:
http://this.that.web#the_id
,使得页面打开时,这个DOM元素紧贴浏览器窗口内部的下延;#the_id{}
;document.getElementById()
来选中这个DOM元素。条目1意味着从语义上不能出现两个相同的ID;
条目2意味着只要一个可见的元素有ID,就可以构建一个地址,使得进入页面中就能看到这个元素*;
条目3意味着你对这个元素,以及它的后代可以很方便地被选取到。但并不推荐这样的行为,原因在于:
#module_a form
的效率比单纯使用类选择器或者混用类选择器和后代选择器低了几个数量级。条目4意味着ID对于JS中操作DOM非常重要。重要到何地步呢,这是在每一个浏览器中都能高效地选取到相应元素的方法。
只要正确理解并体现了ID的作用(1、3、4),ID的数量不会成为问题。顶多是你的页面变大了几kb,但对于当前的中国互联网,这几kb并不是性能瓶颈的主要来源,优化一下图片,减少一下连接数,网页的下载速度就能极大地提升。
只要CSS正确地使用类选择器、后代选择器和伪类选择器来匹配相应的样式,ID也不会对CSS造成影响。
说明: * 并不准确,详见http://www.zhangxinxu.com/wordpress/2013/08/url-anchor-html-%E9%94%9A%E7%82%B9%E5%AE%9A%E4%BD%8D%E6%9C%BA%E5%88%B6-%E5%BA%94%E7%94%A8-%E9%97%AE%E9%A2%98/
杞人忧天了,不会有什么影响的。比如一个页面就上百条的评论我们经常这样
ID太多的话,有时候CSS样式会因为权重的混乱而产生一些小问题,不过这都是正常的可解决的。。。我认为对于单一出现的比较重要的元素用ID最好,因为无论是CSS还是JS,ID选择器的效率是最高的
看是哪种的过多了,重复的东西当然还是给class样式比较好。
有些时候为了覆盖样式需要加长选择层级或者加新的ID比较蛋疼。
作为JS选择器的话ID倒是不错。
个人愚见。