通过DOM脚本去设置样式信息


Posted in Javascript onSeptember 19, 2010

利用DOM脚本去设置样式信息:(by wushan)
在大多数场合,我们都用CSS去设置样式,但在某些特殊情况下,例如要根据元素在节点树里的位置来设置节点样式信息时,目前CSS还没办法做到这一点。但利用DOM就可以很轻易的完成。
例如:把一定样式施加到所有hl元素的下一兄弟节点(下一元素节点)上。这时候用CSS没办法确定位置,但用DOM的getElementsByTagName( )方法很容易就把所有hl元素后面的那个元素找出来,这时候只要对找出来的元素施加样式就可以了。以下是代码清单:

function styleHeaderSibling( ){ 
if(!document.getElementsByTagName) return false; 
//探测浏览器是否支持“getElementsByTagName”方法(个别浏览器并不支持DOM) 
var headers=document. getElementsByTagName(“hl”); 
for(var=0;i<headers.length;i++){ 
var elem=getNextElement(headers[i].nextSibling); 
elem.style.fontWeight=”bold”; 
elem.style.fontsize=”1.2em”; 
} 
} 
function getNextElement(node){ 
if(node.nodeType==1){ //此节点为文本节点 
return node; 

 } 

if(node.nextSibling){ 

retnrn getNextElement(node.nextSibling); 
  } 
return null; 
}

不足:让“行为层”去完成“表现层”工作,当需要改变DOM脚本设置的样式信息时,修改起来很麻烦,如果能给所要设置样式的节点声明一个class属性,那么修改起来就会很简单。例如我们可以对上述例子做出如下修改:
function styleHeaderSibling( ){ 
if(!document.getElementsByTagName) return false; 
//探测浏览器是否支持“getElementsByTagName”方法 
var headers=document. getElementsByTagName(“hl”); 
for(var=0;i<headers.length;i++){ 
var elem=getNextElement(headers[i].nextSibling); 
elem.className=”intro”; 
//给某元素设置class属性值的语法为:elements.className=value 
} 
}

由于此技巧有一不足之处:若该元素原本具有class属性值的话,那么原本的属性值就会被新的属性值所覆盖,原来的样式就会丢失,所有我们要在元class属性值的基础上追加新的属性值,而不是覆盖,方法如下:
function addClass(element,value){ 
if(!element.className){ 
element.className=value; 
 }else{ 
newclassName=element.className; 
newclassName +=" "; // 注意这个空格 
newclassName +=value; 
element.className=newclassName; 

} 
}

接着把上面的函数修改一下就可以了:
function styleHeaderSibling( ){ 
if(!document.getElementsByTagName) return false; 
//探测浏览器是否支持“getElementsByTagName”方法 
var headers=document. getElementsByTagName(“hl”); 
for(var=0;i<headers.length;i++){ 
var elem=getNextElement(headers[i].nextSibling); 
addClass(elem,”intro”); 
} 
}

说明:一般情况下,用DOM去设置样式是很不明智的,此方法只在CSS没办法按要求设置样式来充实页面内容的时候才用。

Javascript 相关文章推荐
比Jquery的document.ready更快的方法
Apr 28 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
JS实现打字游戏
Dec 17 Javascript
javscript对象原型的一些看法
Sep 19 #Javascript
Ext 今日学习总结
Sep 19 #Javascript
JS面向对象编程 for Cookie
Sep 19 #Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 #Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 #Javascript
jquery异步循环获取功能实现代码
Sep 19 #Javascript
JavaScript随机排序(随即出牌)
Sep 17 #Javascript
You might like
php实现的简单美国商品税计算函数
2015/07/13 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python数据类型详解(二)列表
2016/05/08 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
RealTek面试题
2016/06/28 面试题
英语自荐信常用语句
2013/12/13 职场文书
美德好少年事迹材料
2014/01/19 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
歌舞青春观后感
2015/06/10 职场文书
校园之声广播稿
2015/08/18 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
python获取带有返回值的多线程
2022/05/02 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript