这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章给大家总结了 JS 设置 CSS 样式的几种方式,每种方式都非常不错,具有参考借鉴价值,需要的朋友参考下吧
1. 直接设置 style 的属性 某些情况用这个设置 !important 值无效
如果属性有'-'号,就写成驼峰的形式(如 textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px';
- element.style.height = '100px';
2. 直接设置属性(只能用于某些属性,相关样式会自动识别)
- element.setAttribute('height', 100);
- element.setAttribute('height', '100px');
3. 设置 style 的属性
- element.setAttribute('style', 'height: 100px !important');
!important 的 css 定义是拥有最高的优先级。
4. 使用 setProperty 如果要设置! important,推荐用这种方法设置第三个参数
- element.style.setProperty('height', '300px', 'important');
5. 改变 class 比如 JQ 的更改 class 相关方法
- element.className = 'blue';
- element.className += 'blue fb';
6. 设置 cssText
- element.style.cssText = 'height: 100px !important';
- element.style.cssText += 'height: 100px !important';
7. 创建引入新的 css 样式文件
- function addNewStyle(newStyle) {
- var styleElement = document.getElementById('styles_js');
- if (!styleElement) {
- styleElement = document.createElement('style');
- styleElement.type = 'text/css';
- styleElement.id = 'styles_js';
- document.getElementsByTagName('head')[0].appendChild(styleElement);
- }
- styleElement.appendChild(document.createTextNode(newStyle));
- }
- addNewStyle('.box {height: 100px !important;}');
8. 使用 addRule、insertRule
- // 在原有样式操作
- document.styleSheets[0].addRule('.box', 'height: 100px');
- document.styleSheets[0].insertRule('.box {height: 100px}', 0);
- // 或者插入新样式时操作
- var styleEl = document.createElement('style'),
- styleSheet = styleEl.sheet;
- styleSheet.addRule('.box', 'height: 100px');
- styleSheet.insertRule('.box {height: 100px}', 0);
- document.head.appendChild(styleEl);
以上所述是小编给大家介绍的 JS 设置 CSS 样式的方式汇总,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0526/328272.html