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

利用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没办法按要求设置样式来充实页面内容的时候才用。

时间: 2024-10-03 19:45:04

通过DOM脚本去设置样式信息_javascript技巧的相关文章

超级简单实现JavaScript MVC 样式框架_javascript技巧

介绍 使用过JavaScript框架(如AngularJS, Backbone 或者Ember)的人都很熟悉在UI(用户界面,前端)中mvc的工作机理.这些框架实现了MVC,使得在一个单页面中实现根据需要变化视图时更加轻松,而模型-视图-控制器(mvc)的核心概念就是:处理传入请求的控制器.显示信息的视图.表示业务规则和数据访问的模型. 因此,当需要创建这样一个需要在单个页面中实现切换出不同内容的应用时,我们通常选择使用上述框架之一.但是,如果我们仅仅需要一个在一个url中实现视图切换的框架,而

JS 控制CSS样式表_javascript技巧

下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

javaScript 读取和设置文档元素的样式属性_javascript技巧

首先我们先说一下样式表属性 1. 内联样式即元素style属性里面设置的,级别最高 2. 页面样式表定义即页面<style></style>里面定义的,级别次之 3.外部链接样式表文件 JavaScript获取和设置文档元素的css属性: 1.获取元素Style属性里面设置的样式属性, document.getElementById(id).style.height; 有,则返回属性值:没有则返回空 IE和火狐皆然,只是有的属性值返回可能不一样,比如像颜色火狐返回rgb,而IE是返

js脚本分页代码分享(7种样式)_javascript技巧

本文跟大家分享了7种JS脚本分页样式,相信总有一款是适合你的哦 抓紧先上图给大家挑选一下------------------运行效果------------------- 其实小编挺喜欢最后一款的,亲,你呐? 为大家再分享实现JS脚本分页的代码,直接复制代码,运行即可,抓紧试试吧 <html> <head> <title>7种JS脚本分页代码</title> <style> body {font-size: 12px;} /* Pages Mai

JavaScript文本框脚本编写的注意事项_javascript技巧

在HTML中,有两种方式来表现文本框: 一种是使用input元素的单行文本,另一种是使用textarea的多行文本框. 使用input方式,必须添加type,设置为"text". size特性,可以指定文本框内能够显示的字符数. value属性可以设置文本框的初始值. maxlength特性则是用于指定文本框内可以接受的最大字符数. textarea的初始值则必须放在开始和结束标签之内. cols是文本框字符行数: rows是文本框字符列数: 另外,不能在HTML中给textarea指

javascript dom 操作详解 js加强_javascript技巧

1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读属性 nodeValue 1 元素节点 2 属性节点 3 文本节点 只读属性 nodeType 不能用于元素节点 返回 null 2 . getElementsByTagName 返回一个节点集合 3 . firstChild . lastChild 第一个元素节点,最后一个元素节点 4 . childNodes 返回所有

通用javascript脚本函数库 方便开发_javascript技巧

将下面代码保存为Common.js 类库功能: 1.Trim(str)--去除字符串两边的空格 2.XMLEncode(str)--对字符串进行XML编码 3.ShowLabel(str,str)--鼠标提示功能(显示字符,提示字符) 可以设置显示的提示的文字的字体.颜色.大小以及提示的背景颜色.边框等 4.IsEmpty(obj)--验证输入框是否为空 5.IsInt(objStr,sign,zero)--验证是否为整数,正整数,负整数,以及是否包括零 6.IsFloat(objStr,sig

用js小类库获取浏览器的高度和宽度信息_javascript技巧

因此当用户在一个较长内容的网页中点击某一个按钮显示DIV层会发现没有任何效果(其实已经在页面的顶部显示了),因此,我们需要准备的知道用户当前的浏览的位置的信息.在实现这个要求之前,先来看看在js中有哪些工具可以让我们使用: 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth + " (包括边线和滚动条的宽)"; 网页可见区域

Bootstrap的class样式小结_javascript技巧

基础class .code来显示单行内联代码 .pre来显示多行块代码 .kbd来显示用户输入代码 .pre-scrollable高度超出340px,就会在Y轴出现滚动条 表格class .table基础表格margin-bottom:20px,在thead底部2px的浅灰实线,每个单元格顶部1px的浅灰实线 .table-striped:斑马线表格,隔行有一个浅灰色的背景色 .table-bordered:带边框的表格,所有单元格有1px的边框 .table-hover:鼠标悬停在表格的行上,