1、三位一体的网页
网页由三部分组成:结构层(HTML/XHTML,核心部分);表示层(由CSS负责完成);行为层(JavaScript和DOM)。
2、style属性更改样式
Style属性包含元素的样式,是一个对象,而非字符串,样式都放在style对象的属性里。可直接读写。
Eg:<p id="test" style="color:gray;"></p>
p.style.color = red; 直接赋值。
【注意】当引用一个中间带减号的CSS属性时,DOM要求用驼峰命名法。即:p.style.fontFamily,它的值是sans-serif。
DOM在表示样式属性时,采用的单位并不总是与它们在CSS样式表里的设置相同。如CSS设置颜色为gray,JavaScript检索出的也是gray,但若CSS设置为#999999,JavaScript检出为rgb(153,153,153)。
DOM可以解析像font这样的速记属性。
Style只能返回内嵌样式,若样式设置放在head标签或在css文档中,就没有作用了。所以,若要修改元素的样式,只能在JavaScript代码中通过设置style属性值进行修改。Style对象的属性值永远是一个字符串,且必须放在引号里,单引号或双引号均可,否则会认为将一个变量赋给style。
3、何时用DOM脚本设置样式
除了可以再JavaScript代码中,定位某个元素节点,然后对其style对象赋值来设置样式,也可以给元素节点添加或更改class值,使之与CSS文档中的相应选择器一致,也可以改变节点的样式。
如此看来,修改class属性能更好的控制元素样式,且使得行为与表现分离。但什么时候用DOM脚本设置样式呢?
根据元素在节点树里的位置来设置样式;
当然,浏览器不支持CSS的位置选择器时,势必要用的。当文档的内容需要定期编辑和刷新,添加class属性会成为一种负担,这时也要用的。
根据某种条件反复设置某种样式;
比如在表格中,要求交替改变行的背景色。
响应事件
虽然CSS也有伪类,但多数浏览器对其伪类支持很不完整。
4、className属性
设置元素的class值,两种方法:
Element.setAttribute(“class”, “value”);
Element.className = “value”;
分享到:
相关推荐
jquery css-domjquery css-domjquery css-dom
CSS 层叠样式表手册 DOM文档对象中文手册 XML指南 程序员大本营.Net版 绝对超值!!都是编译好的HTML帮助文档,我也是新手!
CSS参考手册.chm JavaScript参考手册.chm jQuery1.11.0参考手册.chm(最新版本的jQuery手册) DHTML完全手册.chm CSS + JS合订版手册.chm 。。。 这些是我从事前端开发这么多年来的积蓄啊,都贡献出来啦!各...
这是我自己在网上找的的dhtml,html,css,javascript,dom帮助文档,其中除了dhtml是英文的其他都是中文版,希望对你有用
VBScript JavaScript Dhtml SQL WSH DOM XML CSS ASp等12个参考手册
该插件提供了使用大多数CSS变量功能(包括选择器级联和一些警告)的一种面向未来的方式,因为它只能看到CSS,而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm install postcss-css-variables --save-dev 目录 -- ...
检查元素的属性,其文本内容,其CSS类,然后为其命名。 这个解决方案 @testing-library/jest-dom库提供了一组可用于扩展笑话的自定义笑话匹配器。 这些将使您的测试更具声明性,易于阅读和维护。 目录 安装 该模块...
npm install shadow-dom-inject-styles --save Vanilla JS示例/演示 < script type =" module " > import { injectStyles } from 'https://unpkg.com/shadow-dom-inject-styles@latest/dist/index.js' ; ...
它可以通过在浏览器中检查站点的实时DOM并反向工程一个新的,更优雅的定义来捕获样式直至像素的方式来工作。 它解决了旧CSS样式相互冲突的问题。 在某一点之后,所有CSS似乎只能通过内部对抗来增长。 该...
bs-css库包含css类型的核心定义,它具有不同的实现: bs-css-emotion是的类型化接口bs-css-dom是ReactDOMRe.Style的类型化接口如果您知道可以添加的其他实现,请发送问题链接或创建PR。安装npm install --save bs-...
原生JS经典小项目-DOM练习
React CSS主题切换器 ...import ReactDOM from 'react-dom' ; import { ThemeSwitcherProvider } from 'react-css-theme-switcher' ; const themes = { light : 'public/light.css' , dark : 'public/dark.css'
css-vars-ponyfill ...支持Web组件/阴影DOM CSS 观看模式在<link>和<style>更改时自动更新 提供UMD和ES6模块 包含TypeScript定义 轻量级(至少6k + gzip)且无依赖 局限性 定制属性声明支持仅
f1-dom-oldify 该模块将采用 f1-dom 模块并将其“旧化”。 例如,它不会运行 css 3d 转换,而是通过旧版本的 ie 上的 ie 过滤操作来模拟相同的内容。 已知的问题: Webkit 以不同的方式呈现透视变换,因此在视觉上...
一.DOM操作分为3类 ...CSS-DOM 失针对CSS的操作,在JavaScript中,只要作用是获取和设置style对象各种属性 二.样式操作 1.直接设置样式值 css(name,value) //设置单个属性 css({name:value,name:value,name:value...
这是网站之前的源码,,内含css,js,html,babel.js,react.js,react-dom.js感谢石川大神的资源,因为是拿的别人的代码,不收费,希望大家多多支持智能社
与DOM库可以在构建的方式类似,我们希望UI库可以在此项目上构建。目标广泛的设备支持:全球使用的设备数量持续增长。 我们的目标是在不牺牲可用性或美观性的前提下支持各种设备。 性能:应用于网页的样式对例如页面...
web前端技术分享,HTML、css、javascript上课的一些小技巧和案例分享。 <!--变色--> ()">+ ()">- ()"> 黄色 橙色 蓝色 红色 陌上人如玉,公子世无双 ...
Ajax-dom-js.zip,dom js是dom本地api的一个扩展,它可以方便、简单、高效地操作dom元素。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中...
Shadow Dom是CSS避孕套,可防止不必要的泄漏。 问题 CSS遭受泄漏的折磨! 看看播放按钮,它应该是白色的! 修复1:CSS反模式 增加CSS特异性 使用!important 终极 CSS泄漏=多余的浸渍。 body.theme div#parent #...