DOM基础教程之使用DOM + Css

1.使用getElementsByTagName修改class类别或者追加类别

代码如下:

<ul class="name1" onclick="clickz()">
    <p>第一个</p>
    <p>第一个</p>
    <p>第一个</p>
    <p>第一个</p>
</ul>
<script type="text/javascript">
    function clickz(){
    var ulo = document.getElementsByTagName("ul")[0];
    ulo.className = "name2";//修改              <br>    //ulo.className += " name2"; //为追加类别
} </script>

赞 (0)

相关推荐

  • 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

  • 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

  • HTML Dom与Css控制方法

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

  • 用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

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

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

  • DOM基础教程之使用DOM控制表格

    DOM基础教程之使用DOM控制表格

    表格的css控制就先不说了,首先分享下表格常用的DOM 表格添加操作的方法常用的为insertRow()和insertCell()方法. row是从零开始计算起的,例如: 复制代码 代码如下: var oTr = document.getElementById("member").insertRow(2) 是指将新行添加到第二行. 复制代码 代码如下: var aText = new Array(); aText[0] = document.createTextNode("f

  • DOM基础教程之使用DOM

    DOM基础教程之使用DOM

    在了解DOM(文本对象模型)的框架和节点后,最重要的是使用这些节点处理html网页 对于一个DOM节点node,都有一系列的属性和方法可以使用.常用的有下表. 完善:http://www.w3school.com.cn/xmldom/dom_element.asp 1.访问节点 BOM提供了一些边界的方法访问节点,常用的就是getElementsByTagName(),和getElementById() 复制代码 代码如下: <script type="text/javascript&qu

  • DOM基础教程之使用DOM控制表单

    DOM基础教程之使用DOM控制表单

    1.表单简介 表单<form>是网页中交互最多的形式之一,它通过各种形式接收用户的数据,包括下拉列表框,单选按钮,复选框和文本框,本篇主要介绍表单中常用的属性和方法 javascript中可以很方便的操作表单,例如获得表单数据进行有效验证,自动给表单域赋值,处理表单事件等. 此时每个form都解析为一个对象,即form对象,可以通过document.forms集合来引用这些对象,例如一个nama属性为form1的表单可以使用 复制代码 代码如下: document.forms["fo

  • DOM基础教程之使用DOM设置文本框

    1.控制用户输入的字符个数 对于单行文本框和密码输入框,可以利用maxlength属性控制用户输入的字符个数. 对于多行文本,maxlength为自定义属性,其值最多输入的字符的个数,在onkeypress事件发生时则调运返回LessThan()函数返回值,函数如下 <textarea name="comments" id="comments" cols="40" rows="4" maxlength="50&

  • DOM基础教程之模型中的模型节点

    <html>位于网页的顶端 它没有父辈,称之为根节点 1.元素节点(element node) 可以说,整个DOM模型都是由元素节点(element node)组成 比如文本段落元素"<p>",无序清单的名称"<ul>",元素节点包含其他元素. 2.文本节点(text node) 例如<h2>中的文本"标题1",<li>中的文字内容,这些具体文本在DOM称为(text node) 3.属

  • DOM基础教程之事件对象

    DOM基础教程之事件对象

    浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别.在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法. 复制代码 代码如下: oP.onclick = function(){ var oEvent = window.event; } 尽管它是window对象属性,但event对象还是只能在事件发生时被访问,所有的事件处理函数执行完之后,该对象就消失了. 而标准的dom规定event对象必须作为唯一的参数传给事

  • DOM基础教程之事件类型

    DOM基础教程之事件类型

    对于用户事件类型而言,最常用的是鼠标.键盘.浏览器. 1.鼠标事件: 鼠标的事件都频繁使用,下面例子就测试各种鼠标事件 复制代码 代码如下: <script language="javascript">             function handle(oEvent) {                 var disp = document.getElementById("display");                 if (window

  • Javascript & DHTML 实例编程（教程）DOM基础和基本API

    一.什么是DOM? 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了.因此,必须要对DOM有一定的认识,才能把J

  • JavaScript学习笔记之DOM基础操作实例小结

    JavaScript学习笔记之DOM基础操作实例小结

    本文实例讲述了JavaScript DOM基础操作.分享给大家供大家参考,具体如下: 一.子节点 1.元素节点.文本节点 实例01 html <body> <ulid="ul1"> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4<li></li> 文本节点5<li></li> 文本节点6&

随机推荐