JavaScript驾驭网页-CSS与DOM

推荐阅读：JavaScript驾驭网页－DOM

DOM是种符合万维网标准的HTML操纵方式，它能比innerHTML特性达成更多操控功能

这里有HTML代码与CSS代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
span.class1{
background-color:#DDDDDD;
}
span.class2{
background-color:#221717;
}
</style>
</head>
<body>
<span id="span1" class="class1">
Start Game
</span>
<span id="span2" class="class2">
Start Game
</span>
</body>
</html>

借由改变节点的整份样式类，className节点特性达成戏剧性的样式变化

DOM透过节点属性的className特性，提供对元素样式类的访问

alert(document.getElementById(“span1”).className);

通过更改CSS样式类的名称，完成对元素外观的转变

document.getElementById(“span1”).className=”class2”;//将span1的样式换成span2的样式

同理，我们也可以在这里用onmouseover()与onmouseout()事件对元素的样式加以控制

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'">

虽然这种效果一般用CSS来加以控制，不过，这里只注重对这些工具的应用，大家触类旁通即可

CSS样式类与Javascript类完全无关——它们是完全不同的东西

借由访问节点的单一样式特性，style节点特性达成少量样式变化

节点的Style特性提供对单一样式特性的访问

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'" style=" visibility:hidden">

style=” visibility:hidden”指示元素隐藏

网页元素可以利用元素对象的visibility 样式特性做动态的显示或隐藏（display:none/display:block 同样可以完成对元素的隐藏与显示）

DOM能随意创建任何HTML元素，当然包括文本段落

document.createElement()用于创建一个HTML标签，参数是标签名

document.createElement(“p”)创建一个p标签

另：document.createTextNode()用于创建文本段落，参数是文本内容

var pElem=document.createElement(“p”);//创建一个P标签

pElem.appendChild(document.createTextNode(“Hello WeAreZero!”));//为P标签添加子元素 文本

document.getElementById(“span1”).appendChild(pElem);//将P标签以及其子元素添加到span1标签下

附录：

利用document对象的createElement()方法，能够创建任何HTML元素

若需新增元素的文本内容，必须创建一个文本内容子元素，并附加至元素下

借由小心地新增与移除DOM树上的节点，网页可以随意拆解与重组

JavaScript驾驭网页-CSS与DOM的介绍就到这里，希望对大家有所帮助！

赞 (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

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

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

  • JavaScript驾驭网页-CSS与DOM

    推荐阅读:JavaScript驾驭网页-DOM DOM是种符合万维网标准的HTML操纵方式,它能比innerHTML特性达成更多操控功能 这里有HTML代码与CSS代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> span.class

  • JavaScript驾驭网页－DOM

    JavaScript驾驭网页－DOM

    一.DOM全称 文档对象模型(Document Object Model) 二.DOM是什么 DOM就是一个编程接口,就是一套API. DOM是针对HTML文档.XML等文档的一套API.就类似于JDBC是针对数据库的一套API一样. 三.DOM的用途 DOM 是用来访问或操作HTML文档.XHTML文档.XML文档中的节点元素. 现在基本上所有的浏览器都都执行了W3C发布的DOM规范,所以在浏览器上就可以用DOM的这些API. DOM提供对脚本友善的网页结构与内容的视图 DOM把网页视为节点构

  • JavaScript驾驭网页－获取网页元素

    推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪.只是不用收拾列羹剩肴,但也没有办法享受美味的成果. 不过,你将能完整网页内容的HTML构成要素:更重要的是,你将拥有替换网页成分的能力. JavaScript让你可以随心所欲地操控网页的HTML代码,从而打开各种有趣的机会之门,一切都是因为标准对象:DOM的存在 getElementById HTML标签都有一个"id"

  • javascript实现网页中涉及的简易运动（改变宽高、透明度、位置）

    平时工作中写网页涉及的运动往往都非常简单,比如改变宽高,透明度,位置,是最常用的几种形式,为了省事,整合了下,于是就有了下面这个东东: 兼容:IE系列.chrome.firefox.opera.Safari.360 /* javascript简易运动 Move.action(dom对象,json格式属性值对,缓动参考值,回调方法) 示例: var box = document.getElementById('Ele'); Move.action(box,{width:500,height:200

  • JavaScript实现网页播放器

    JavaScript实现网页播放器

    今天我和大家分享用JavaScript在网页编写一个播放器. 对于播放器,大家都不陌生,那么要怎么样才能实现它呢? 下面是我做的一个播放器的图 首先我们从上向下看看这个播放器,它的最上面是标题(head):我的音乐:中间是内容(body):歌曲:最下面(foot):控制音乐播放的控件.标题部分就只有标题:我的音乐,而中间内容部分是歌单,每个歌曲都有一个播放图标(音乐播放时才有)和歌曲的信息,底部部分有一些控制播放的图标.当前播放歌曲名.歌曲播放进度还有歌曲播放时长. 布局这块我们要保存结构与样式

  • JavaScript实现网页视频添加水印的示例代码

    JavaScript实现网页视频添加水印的示例代码

    目录 示例图 原理 代码示例 示例图 原理 通过html的页面布局,在video播放器层面,通过js控制dom,插入文本水印代码. 代码示例 index.html <!DOCTYPE html> <html> <head> <meta name="renderer" content="webkit" /> <meta http-equiv="Content-Type" content=&quo

  • JavaScript如何动态监听DOM元素高度详解

    JavaScript如何动态监听DOM元素高度详解

    背景 考虑这样一种情况,产品同学希望达到以下功能: 在我们的网页中有一个固定区域,这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串. 他需要在内容不超过一个最大高度的时候完全显示所有内容,超过最大内容后仅展示最大高度范围内的内容,超出部分隐藏,并通过一个按钮 “展示更多” 来给用户展示更多的选择. 在这看似简单的需求当中,其实涉及到了一个难点,那就是怎样动态的监听到内容区域的高度变化? 因为在这里面会含有图片资源,他们在渲染的时候会发起网络请求,等待图片加载完成后触发浏览器重排,该区域

  • 利用JavaScript在网页实现八数码启发式A*算法动画效果

    利用JavaScript在网页实现八数码启发式A*算法动画效果

    最近人工智能课老师布置了一个八数码实验,网上看到很多八数码的启发式A*算法,但是大多数都是利用C或者C++在控制台实现的,于是我用js在网页中做了一个类似的. 首先八数码就是一个九宫格,其中有一个空格,其他八个对应数字1-8, 移动空格,使得最后状态为有序,如下图 启发式算法是指在求解时,利用启发函数将不符合规则的解节点去掉,从而缩小问题的解空间. A*算法是利用评价函数的启发式算法,在本例中,利用当前节点状态与最终节点状态所不同的格子数来评估节点的优劣,将优越节点储存并在之后展开,将劣质节点抛

  • JavaScript实现网页头部进度条刷新

    JavaScript实现网页头部进度条刷新

    本文刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲染过程中来,所以只是一个表象,并不是说这个显示完了就浏览器也加载完了所以资源. 效果图: 先看下html: 就两个标签 <div id="barbg"> <div id="bar"> </div> </div> CSS: 布局也很简单 <style> *{margin:0;padding:0;} #barbg{height:5px; bac

  • JavaScript针对网页节点的增删改查用法实例

    JavaScript针对网页节点的增删改查用法实例

    本文实例讲述了JavaScript针对网页节点的增删改查用法.分享给大家供大家参考.具体分析如下: 一.基本概念 这部分也就是所谓的"HTML DOM",所谓HTML DOM也就是Web页面加载规则,是一个规则,也就是网页组成的基本公式. 也就是所有网页都必须按照:<html><body></body></html>--的规则编写,也按照这样的规则加载. 所谓的"网页节点",也叫"DOM节点"的通俗

随机推荐