JavaScript文档对象模型document对象改变Html元素样式属性(5)

1. document对象改变Html元素样式属性

行内样式操作案例如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {height: 200px;width: 200px;background-color: darkgoldenrod;}</style></head><body>//当点击div这个盒子就换个背景颜色宽度也变宽<div></div>  <script>var obj = document.querySelector('div'); //获取元素对象//注册事件 事件处理函数obj.onclick = function() {this.style.backgroundColor = 'purple';  //修改Html元素样式属性this.style.width='300px';}</script></body>
</html>

类名样式操作如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {height: 200px;width: 200px;background-color: darkgoldenrod;}.change {background-color: purple;margin-top: 100px;}</style></head><body><div></div><script>//只有少许样式修改的时候就用js的行内样式操作修改//欧大量的样式修改就用js的类名样式操作修改var div = document.querySelector('div');div.onclick = function() {this.className = 'change';}</script></body>
</html>

JavaScript文档对象模型document对象改变Html元素样式属性(5)相关推荐

JavaScript文档对象模型document对象改变Html表单属性(4)
1.document对象改变Html表单属性更改Html元素内容时候可以用innerHtml属性进行修改,但是表单元素只能用value属性修改元素内容案例如下: <!DOCTYPE html ...
JavaScript文档对象模型document对象改变Html元素内容(3)
1.document对象改变Html元素内容 (1.)innerText不会自动解析html标签,会将代码前后的空格和换行去掉 innerHTMl会自动解析html标签,保留代码前后的空格和换行 (推 ...
JavaScript文档对象模型document对象查找Html元素(2)
1.document对象查找Html元素以下表格是获取Html元素的常用方法: (1.)getElementById方法:返回值是元素对象,如果没有符合的条件对象,则返回为null: (2.)get ...
JavaScript文档对象模型document对象获取自定义属性值和设置移除自定义属性(5)
得出结论:element .属性只能获取内置对象属性值,而element.getAtrribute('属性')不仅可以获取内置对象属性值,还可以获取自定义属性值获得属性值案例: <!DOCTY ...
javaScript文档对象模型DOM
文档对象模型DOM 文档对象模型(document object model) 有一个表格,点击添加按钮添加事件 DOM中的属性和方法的理解 DOM中属性的操作: 属性映射表文档对象模型(docum ...
JavaScript——文档对象模型
一.基本概念文档对象模型(DOM)是表示文档和访问.操作构成文档的各种元素的应用程序接口(API).它解决了NetScape的JavaScript和Microsoft的JavaScript之间的冲突 ...
DOM4J解析XML文档、Document对象、节点对象节点对象属性、将文档写入XML文件（详细）...
Dom4j是一个简单.灵活的开放源代码的库.Dom4j是由早期开发JDOM开发的.与JDOM不同的是,dom4j使用接口和抽象的人分离出来而后独立基类,虽然Dom4j的API相对要复杂一些,但它提供了 ...
JavaScript文档对象模型DOM节点操作之复制节点（7）
示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
JavaScript文档对象模型DOM节点操作之兄弟节点（4）
示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...

JavaScript文档对象模型document对象改变Html元素样式属性(5)

1. document对象改变Html元素样式属性

JavaScript文档对象模型document对象改变Html元素样式属性(5)相关推荐

最新文章

热门文章