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
相关推荐
-
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的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
-
用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
-
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
-
HTML Dom与Css控制方法
我们大部份对Css中的使用,都会在网页中使用一个Link标签来引入一个Css文件.或者在 网页中Head标签内定义Css样式.其实Dom提供了若干个指令.可以动态的设置或获取元素的Css外观样式.你或许在其他网站中看到过"换肤"的功能.该技术就是使用了Dom指令 为当前网页引入了一个新的Css文件.让网页的外观骤然改变.当然你也可以只针对当前网页中某个元素的外观进行设置.运用得当可以很大程度的提高用户体验!下面我就列举一 下Dom中有关Css的指令.限于篇幅,我不在该页内提供各个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组合动态创建表格实例
这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们.你可以学到如何动态地创建.获取.控制和删除HTML元素.这些DOM方法同样适用于XML.所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例,比如IE5,Firefox等. 这篇文章通过实例代码介绍DOM.请从尝试下面的HTML例子开始.它使用DOM 1的方法由JavaScript动态创建一个HTML表格.它创建一个由四个包含文本内容的单元格组成的小表格.单元格的文字内容是:"单元格是第y行第x列
-
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
随机推荐
- 详解AngularJS过滤器的使用
- SQL语句的并集UNION 交集JOIN(内连接,外连接)等介绍
- Java分页工具类及其使用(示例分享)
- JS只能输入数字或数字和字母等的正则表达式
- javascript生成/解析dom的CDATA类型的字段的代码
- ASP.NET购物车实现过程详解
- php实现在站点里面添加邮件发送的功能
- PHP 进度条函数的简单实例
- Python中的MongoDB基本操作:连接、查询实例
- Golang中channel使用的一些小技巧
- 减少C++代码编译时间的简单方法(必看篇)
- php对mongodb的扩展(小试牛刀)
- 使用curl递归下载软件脚本分享
- Linux下高并发socket最大连接数所受的各种限制(详解)
- 载入进度条 效果
- js字符串操作总结(必看篇)
- IIS 7.0安装配置方法图文教程(win7)
- Redis如何在项目中合理使用经验分享
- javascript中如何判断类型汇总
- 利用SSL配置Nginx反向代理的简单步骤