利用DOM脚本去设置样式的特殊情况
利用DOM脚本去设置样式信息:(by wushan)
在大多数场合,我们都用CSS去设置样式,但在某些特殊情况下,例如要根据元素在节点树里的位置来设置节点样式信息时,目前CSS还没办法做到这一点。但利用DOM就可以很轻易的完成。
例如:把一定样式施加到所有hl元素的下一兄弟节点(下一元素节点)上。这时候用CSS没办法确定位置,但用DOM的getElementsByTagName( )方法很容易就把所有hl元素后面的那个元素找出来,这时候只要对找出来的元素施加样式就可以了。以下是代码清单:
复制代码 代码如下:
function styleHeaderSibling( ){
if(!lementsByTagName) return false;
//探测浏览器是否支持“getElementsByTagName”方法(个别浏览器并不支持DOM)
var headers=document. getElementsByTagName(“hl”);
for(var=0;i<th;i++){
var elem=getNextElement(headers[i]Sibling);
Weight=”bold”;
size=”1.2em”;
}
}
function getNextElement(node){
if(Type==1){ //此节点为文本节点
return node;
}
if(Sibling){
retnrn getNextElement(Sibling);
}
return null;
}
不足:让“行为层”去完成“表现层”工作,当需要改变DOM脚本设置的样式信息时,修改起来很麻烦,如果能给所要设置样式的节点声明一个class属性,那么修改起来就会很简单。例如我们可以对上述例子做出如下修改:
复制代码 代码如下:
function styleHeaderSibling( ){
if(!lementsByTagName) return false;
//探测浏览器是否支持“getElementsByTagName”方法
var headers=document. getElementsByTagName(“hl”);
for(var=0;i<th;i++){
var elem=getNextElement(headers[i]Sibling);
sName=”intro”;
//给某元素设置class属性值的语法为:sName=value
}
}
由于此技巧有一不足之处:若该元素原本具有class属性值的话,那么原本的属性值就会被新的属性值所覆盖,原来的样式就会丢失,所有我们要在元class属性值的.基础上追加新的属性值,而不是覆盖,方法如下:
复制代码 代码如下:
function addClass(element,value){
if(!sName){
sName=value;
}else{
newclassName=sName;
newclassName +=" "; // 注意这个空格
newclassName +=value;
sName=newclassName;
}
}
接着把上面的函数修改一下就可以了:
复制代码 代码如下:
function styleHeaderSibling( ){
if(!lementsByTagName) return false;
//探测浏览器是否支持“getElementsByTagName”方法
var headers=document. getElementsByTagName(“hl”);
for(var=0;i<th;i++){
var elem=getNextElement(headers[i]Sibling);
addClass(elem,”intro”);
}
}
说明:一般情况下,用DOM去设置样式是很不明智的,此方法只在CSS没办法按要求设置样式来充实页面内容的时候才用。
-
如何理解Javascript的caller,callee,call,apply区别
在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsarguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的Function对象的名字。n:选项。要传递给Function对象的从0开始的参数值...
-
JavaScript的课堂讲解
本文主要内容:1.分析函数的四种调用形式2.弄清楚函数中this的意义3.明确构造函对象的过程4.学会使用上下文调用函数一、函数调用形式函数调用形式是最常见的形式,也是最好理解的形式。所谓函数形式就是一般声明函数后直接调用即是。例如:复制代码代码如下://声明...
-
javascript闭包的定义及应用实例分析
官方解释“闭包”是一个拥有许多变量和绑定了这些变量的环境表达式(通常是一个函数),因而这些变量也是环境表达式的一部分。通俗解释Javascript中所有的函数都是一个闭包。不过一般来说,嵌套的function产生的闭包更为强大,也是大部分时候我们所说的“闭包”。看如下...
-
SQL的SUBSTR 函数的使用方法介绍
SUBSTR函数是用来截取数据库某一列字段中的一部分。在各个数据库的函数名称不一样(真是蛋疼,后发明的`数据库难道不能同先发明的一样吗?)复制代码代码如下:MySQL:SUBSTR(),SUBSTRING()Oracle:SUBSTR()SQLServer:SUBSTRING();常用的方式是:SBUSTR(str,pos);就是从pos...