通过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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
js读取配置文件自写
2014/02/11 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
Python通过select实现异步IO的方法
2015/06/04 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
python爬取抖音视频的实例分析
2021/01/19 Python
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
工作交流会欢迎词
2014/01/12 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
投资意向书
2014/07/30 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
个人工作表现自我评价
2015/03/06 职场文书
英语通知范文
2015/04/22 职场文书
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL