js通过DOM改变html和css
1.改变html输出流，通过document.write() 直接向 HTML 输出流写内容
<body>
<p>段落</p>
<script>
document.write(Date());
</script>
</body>
2.改变html内容，document.getElementById(id).innerHTML=''新的html
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").innerHTML="新文本!";
</script>
3.改变html属性，document.getElementById(id).attribute=新属性值
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").height='160';
</script>
会将图片调整为长、宽相等的正方形图片
4.改变css，通过document.getElementById("p1").style.css属性=css属性值
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p1").style.color='yellow';
document.getElementById("p2").style.background="red";
</script>
js通过DOM改变html和css的更多相关文章
- JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...
- 【CSS】398- 原生JS实现DOM爆炸效果
爆炸动效分享 前言 此次分享是一次自我组件开发的总结,还是有很多不足之处,望各位大大多提宝贵意见,互相学习交流. 分享内容介绍 通过原生js代码,实现粒子爆炸效果组件 组件开发过程中,使用到了公司内部 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- JS的DOM操作及动画
JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...
- js的dom对象（带实例超详细全解）
js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...
- JS的DOM操作语法
整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- JS基础-DOM
DOM DOM 事件的级别 DOM 事件模型 DOM 事件流 DOM 事件捕获的具体流程 Event 对象的常见应用 自定义事件 DOM概述 | MDN DOM | MDN DOM操作 DOM事件级别 ...
- JS 07 Dom
DOM(Document Object Model): 结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容. 结点类型 1.元素结点 2.属性结点 3.文本结点 结点的注意 ...
- js的dom操作（整理）（转）
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
随机推荐
- 调用另一个文件的python代码【转载】
转自:https://blog.csdn.net/u010412719/article/details/47089883 例如我们有a.py和b.py两个文件,当我们需要在b.py文件中应用a.py中 ...
- 【LeetCode每天一题】Pascal's Triangle(杨辉三角)
Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. In Pascal's t ...
- 30-Python3 正则表达式
30-Python3 正则表达式 ''' re.match函数 ''' import re print(re.match('www','www.runoob.com').span()) print(r ...
- js 数组里面任意两个数的和与目标值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 配置opensips经验总结
主要参考https://www.cnblogs.com/Forever-Kenlen-Ja/p/7741776.html (ubuntu),还有https://blog.csdn.net/sunyun ...
- WebAssembly 浏览器中运行c/c++模块
今天,要给前端造点儿福利 浏览器中能调用javascript,曾经我们以为够用了,够强大了,但是事实上是完全不够 还好,mozilla的工程师提出了webassembly,目前是利用emsctript ...
- 巧用CurrentThread.Name来统一标识日志记录（完结篇）
▄︻┻┳═一Agenda: ▄︻┻┳═一巧用CurrentThread.Name来统一标识日志记录 ▄︻┻┳═一巧用CurrentThread.Name来统一标识日志记录(续) ▄︻┻┳═一巧用Cur ...
- teragen/terasort_简化版
1, 关闭Hadoop安全模式 进入hdfs用户 su – hdfs Cd /opt/cloudera/parcels/CDH-5.12.1-1.cdh5.12.1.p0.3/bin hdfs dfs ...
- Hibernate.编写xml文件无自动提示信息
Hibernate.编写xml文件无自动提示信息 注意: 配置 xxxx.hbm.xml 文件的自动提示.和配置 hibernate.cfg.xml 文件的提示,操作步骤是一样的.只是复制的文件内容. ...
- 更改file文件上传默认CSS样式
前言: 多数时候我们需要表单上传文件,如图片.但是浏览器默认的input[file]样式很不友好, 需要我们自己手动修改. 如图基于bootstrap布局的表单, 但file文件上传样式不敢恭维. & ...