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

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

赞 (0)

相关推荐

  • js 设置css的定位

    new document .WOKAO [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 使用JavaScript动态设置样式实现代码(2)

    你可以参考到前一版本 http://www.jb51.net/article/33555.htm 这个有点不好的地方,就是如果想改变样式,也许得使用查找替换才行. 因此,Insus.NET写出另外一个方法来实现,这样可以改一应用百. 先写一个样式Style: 复制代码 代码如下: <style type="text/css"> .overStyle { border-color:#3599ff; } .outStyle { border-color: #fff; } <

  • 通过javascript设置css属性的代码

    1.透明度: 如果没有为一个文本指定一个背景颜色或者一个背景图像,那么这个元素的背景通常是透明的. 这一点很重要,如果一个绝对定位的且带有文本的元素放在一个有文本的元素之上,那么将会十分的混乱,那么我们就可以通过设置背景图片或者背景颜色来进行遮盖,如果必须的话我们可以将其显示的设置为"transparent"(透明的) 通用的设置透明元素通用的css如下: 复制代码 代码如下: opacity:.75;//ff new -moz-opacity:.75;// transparency

  • jQuery toggle()设置CSS样式

    toggle() 切换元素的可见状态. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. --------------------------------- 示例 切换所有段落的可见状态. HTML 代码: <p>Hello</p><p style="display: none">Hello Again</p> jQuery 代码: $("p").toggle() 结果: <p tyle=&quo

  • IE及firefox下获取及设置样式值的代码

    复制代码 代码如下: <script type="text/javascript"> //<![CDATA[ function $(obj) { return document.getElementById(obj); } function getStyle(obj,styleName) { if(obj.currentStyle) //for ies { return obj.currentStyle[styleName]; //注意获取方式 } else //fo

  • js setattribute批量设置css样式

    firefox等可以使用 var dom=document.getElementById("name"); dom.setAttribute("style","width:10px;height:10px;border:solid 1px red;") ; IE中则必须使用style.cssText var dom=document.getElementById("name"); dom1.style.cssText = &q

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

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

  • Python脚本获取操作系统版本信息

    Python脚本获取操作系统版本信息

    查看系统版本信息是一件家常便饭的事情,有时候需要将版本信息录入到资产管理系统中,如果每次手动的去查询这些信息再录入系统那么是一件令人呢头疼的事情,如果采用脚本去完成这件事情,那么情况就有所不同了. 在Python的世界里,获取Windows版本信息和Linux的版本信息都可以采用platform模块,但platform模块也不是万能的,有些特殊的信息(比如Windows的内部版本号)这个模块拿不到,那么只能另辟蹊径了. 在Linux系统中,可以简单的认为一切都是文件,那么就算没有现成的命令可用时

  • JavaScript DOM操作表格及样式

    一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe

  • jQuery在header中设置请求信息的方法

    jquery是js的类库,js本身不能操作header,因为js是在浏览器加载页面过程中才开始执行的header需要服务器端执行操作 如果是ajax,是可以设置header $.ajax({ url: "", data: {}, type: "GET", beforeSend: function(xhr){xhr.setRequestHeader('X-Test-Header', 'test-value');},//这里设置header success: funct

  • SpringBoot通过redisTemplate调用lua脚本并打印调试信息到redis log(方法步骤详解)

    第一次写Lua脚本,并通过springboot的redisTemplate调用脚本,进行脚本与应用的交互.不熟悉真的折腾了好久,现在总结一下学习过程: 第一次写完lua时,想到的就是如何在应用调用脚本的时候,去调试脚本.在网上海搜了一把,能找到的有点相关的寥寥无几. 有一种方法是通过执行redis命令,调用redis客户端,加载lua脚本,然后出现基于命令行调试的交互界面,输入调试命令去调试脚本.如下: 在终端输入命令:redis-cli.exe --ldb --eval LimitLoadTi

  • vue获取DOM元素并设置属性的两种实现方法

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件

  • Angular设置title信息解决SEO方面存在问题

    Angular设置title信息解决SEO方面存在问题

    Javascript框架在处理seo方面存在问题,因为爬虫在检索seo信息的时候会读不了js给其赋的值,导致搜索引擎收录不了或者收录了无效的信息,比如收录的可能是title={{title}}这样的,下面先说如何在路由跳转时修改页面的seo信息,现在spa跳转一般用route-ui了,就以这个为基础讲解,在app.js配置项state中加入title信息,如下:data:{ pageTitle:'user title'} .state('index.user', { url: '/user',

  • jQuery实现为LI列表前3行设置样式的方法【2种方法】

    jQuery实现为LI列表前3行设置样式的方法【2种方法】

    本文实例讲述了jQuery实现为LI列表前3行设置样式的方法.分享给大家供大家参考,具体如下: 在设计网页模板的时候,为了突出信息的重要性以及美观度,我们会设置一些样式使LI文章列表的前3行加上不同的样式,例如给LI文章列表的前3行文字颜色设置红色,再例如图片列表的时候设置列表第一张图片.第二张图片等的宽和高,都可以用蓝叶分享的这两种方法为LI列表设置样式:对于懂PHP语言的设计者来说,很容易就可以实现的效果,对于不懂PHP语言的可以使用这两种方法也很轻松的实现自己想要的各种效果. <!DOCT

  • js 获取元素的具体样式信息getcss(实例讲解)

    如果想获取元素的某一个具体的样式属性值 1.元素.style.属性名 需要我们把元素的样式都写在行内样式上才可以(写在样式表中是不管用的) console.log(box.style.height)  ->null 在真实项目中,这种方式不常用,因为不能为了获取值而把所有的样式都写在行内(无法实现html和css的分离) 2.使用window.getComputedStyle(当前操作的元素对象,当前元素的伪类[一般我们不用伪类写null])这个方法获取所有经过浏览器计算过的样式 所有经过浏览器

随机推荐