HTML Dom与Css控制方法

我们大部份对Css中的使用，都会在网页中使用一个Link标签来引入一个Css文件．或者在 网页中Head标签内定义Css样式．其实Dom提供了若干个指令．可以动态的设置或获取元素的Css外观样式．你或许在其他网站中看到过＂换肤＂的功能．该技术就是使用了Dom指令 为当前网页引入了一个新的Css文件．让网页的外观骤然改变．当然你也可以只针对当前网页中某个元素的外观进行设置．运用得当可以很大程度的提高用户体验！下面我就列举一 下Dom中有关Css的指令．限于篇幅，我不在该页内提供各个Dom指令的使用方法和实例演示，你可以点击相关的Dom指令名称．来了解相关指令的详细说明与实例演示．

使用Dom的className为当前元素指定一个Css样式类的名称．以改变当前元素的外观样式
HTML Dom中为当前元素设置多个Css属性样式：cssText
HTML Dom获取当前元素指定的Css属性值的指令是：currentStyle 支持IE
HTML Dom获取当前元素指定的Css属性值的指令是：getPropertyValue 支持FF
HTML Dom中还提供了一个createStyleSheet指令．可以动态的网页引入一个新的Css文件．也就是我前面提到的＂换肤＂功能．遗憾的是该指令不支持FF和Chrome浏览器， 不过我在createStyleSheet的讲解中已经解决了FF下的同样效果．
在ajax技术的带领下．近年来Dom发展迅速．也被很多人重视起来．很多大网站极力追求良好的用户体验．这些技术也变得不再陌生！其实这些都属于前端设计的范围，如今像＂百度＂，＂淘宝＂，＂腾迅＂等等这些大公司都相当重视前端设计． 所以学习好前端也是一个不错的选择，希望今天讲的能够帮到你！

作者：康董 出自：Www.Web666.Net

赞 (0)

相关推荐

  • 纯JS实现根据CSS的class选择DOM

    // 网上参考的,自己修改了一部分 // 代码如下,纯JS,要求浏览器支持 getElementsByClassName 方法 复制代码 代码如下: <script type="text/javascript"> function getElementsByClassName(classname,node){ node = node || window.document; if(node.getElementsByClassName){ return node.getEle

  • DOM基础教程之使用DOM + Css

    1.使用getElementsByTagName修改class类别或者追加类别 复制代码 代码如下: <ul class="name1" onclick="clickz()">     <p>第一个</p>     <p>第一个</p>     <p>第一个</p>     <p>第一个</p> </ul> <script type=&quo

  • c#后台修改前台DOM的css属性示例代码

    <div id = 'div1' runat="server">haha</div> ----------- 后台代码中这样调用 div1.Style["display"]="inline"; 注意,c#中要用双引号. using System.Web.UI.WebControls;得引入这个命名空间 Style["background-image"] ="url(images/bg_acti

  • JS、CSS以及img对DOMContentLoaded事件的影响

    JS、CSS以及img对DOMContentLoaded事件的影响

    前端的纯技术就是对规范的认知 什么是DOMContentLoaded事件? 首先想到的是查看W3C的HTML5规范,DOMContentLoaded事件在什么时候触发: Once the user agent stops parsing the document, the user agent must run the following steps: 1. Set the current document readiness to "interactive" and the inse

  • 用dom+xhtml+css制作的一个相册效果代码打包下载

    突然看到那个apple的底下的那个很漂亮,所以呢,我就改进了一下 做了一个图片版本的,好像很多人都做了个 http://home.goofar.com/bqqdqq/photo/a.html 上面这个是预览地址 如果浏览速度慢的话,下面是我做了一个包出来 兼容FF,IE 在线演示http://img.jb51.net/online/photo/a.html本地下载http://img.jb51.net/online/photo/photo.rar

  • HTML Dom与Css控制方法

    我们大部份对Css中的使用,都会在网页中使用一个Link标签来引入一个Css文件．或者在 网页中Head标签内定义Css样式．其实Dom提供了若干个指令．可以动态的设置或获取元素的Css外观样式．你或许在其他网站中看到过＂换肤＂的功能．该技术就是使用了Dom指令 为当前网页引入了一个新的Css文件．让网页的外观骤然改变．当然你也可以只针对当前网页中某个元素的外观进行设置．运用得当可以很大程度的提高用户体验!下面我就列举一 下Dom中有关Css的指令．限于篇幅,我不在该页内提供各个Dom指令的使用

  • javascript学习笔记（三）BOM和DOM详解

    javascript学习笔记（三）BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象,而非 js 对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BOM

  • JavaScript与DOM组合动态创建表格实例

    JavaScript与DOM组合动态创建表格实例

    这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们.你可以学到如何动态地创建.获取.控制和删除HTML元素.这些DOM方法同样适用于XML.所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例,比如IE5,Firefox等. 这篇文章通过实例代码介绍DOM.请从尝试下面的HTML例子开始.它使用DOM 1的方法由JavaScript动态创建一个HTML表格.它创建一个由四个包含文本内容的单元格组成的小表格.单元格的文字内容是:"单元格是第y行第x列

  • JavaScript位置与大小（1）之正确理解和运用与尺寸大小相关的DOM属性

    JavaScript位置与大小（1）之正确理解和运用与尺寸大小相关的DOM属性

    在web开发中,不可避免遇到要计算元素大小以及位置的问题,解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来,所有内容大概分3篇左右的文章的来说明.本文作为第一篇,介绍DOM提供的与尺寸大小相关的DOM属性,提供一些兼容性处理的方法,并结合常见的场景说明如何正确运用这些属性. 1. 正确理解offsetWidth.clientWidth.scrollWidth及相应的height属性 假设某一个元素的横纵向滚动条都拖动到最末端,则offsetWidth.clientWidth.scr

  • 使css兼容IE8的小技巧

    这样就存在了新的问题,目前在IE7中工作正常的网页在IE8中会出现问题. 微软在IE8提供三种解析页面的模式 IE8 Standard Modes :默认的最标准的模式,严格按照W3C相关规定 IE7 Standards Modes :IE7现在用的解析网页的模式,开起机关是在中加入  Quirks Modes :IE5用的解析网页的模式,开起机关是删除HTML顶部的DOCTYPE声明  注意:不同模式间的网页在IE8中可以互相 frame ,因此因不会模式下的DOM和CSS渲染不一样,所以会引

  • 使用Javascript和DOM Interfaces来处理HTML

    1.创建表格 Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces function start() { // get the reference for the body var mybody=document.getElementsByTagName("body").item(0); // creates an element whose tag name is TABLE mytable

  • js 操作css实现代码

    当我们需要的是一条规则的时候,总不能在每次dom发生变化的时候去执行这个操作,否则也太效率低下了.好在dom中css rules也是可以修改的.不过不同浏览器的对于css rules的接口描述也不同,其中ie中以类似hash table的方式,而ff以数组方式. 从可编程性上说,ie的接口描述更讨程序员喜欢,不过从逻辑上说,ff显然更为合理. 我提供了类似于ie的方式对两套代码进行简单包装,不过ie在dom的css removeRule之后并不能确定同步的把规则兑现.所以最好用规则覆盖的方式而非

  • JavaScript 实现HTML DOM增删改查操作的常见方法详解

    本文实例讲述了JavaScript 实现HTML DOM增删改查操作的常见方法.分享给大家供大家参考,具体如下: 首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的:通过ID查找: <!DOCTYPE html> <html> <head> <title>learn javascript</title&g

随机推荐