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的更多相关文章

  1. JavaScript HTML DOM - 改变CSS

    JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...

  2. 【CSS】398- 原生JS实现DOM爆炸效果

    爆炸动效分享 前言 此次分享是一次自我组件开发的总结,还是有很多不足之处,望各位大大多提宝贵意见,互相学习交流. 分享内容介绍 通过原生js代码,实现粒子爆炸效果组件 组件开发过程中,使用到了公司内部 ...

  3. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  4. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  5. js的dom对象（带实例超详细全解）

    js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...

  6. JS的DOM操作语法

    整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  7. JS基础-DOM

    DOM DOM 事件的级别 DOM 事件模型 DOM 事件流 DOM 事件捕获的具体流程 Event 对象的常见应用 自定义事件 DOM概述 | MDN DOM | MDN DOM操作 DOM事件级别 ...

  8. JS 07 Dom

    DOM(Document Object Model): 结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容. 结点类型 1.元素结点 2.属性结点 3.文本结点   结点的注意 ...

  9. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

随机推荐

  1. async和await用法(Task)

    原文:async和await用法 要理解async和await的用法,首先要了解Task相关知识,这里不做说明,因为这不是本文的重点. 如果你已经对Task很了解,那么如何使用async和await, ...

  2. 编写一个程序解决选择问题。令k=N/2。

    import java.util.Arrays; /** * 选择问题,确定N个数中第K个最大值 * @author wulei * 将前k个数读进一个数组,冒泡排序(递减),再将剩下的元素逐个读入, ...

  3. ES6学习之 解构赋值

    最近看了一个vue的项目,发现作者大量使用了ES6的语法,包括async, Promise, Set, Map还有一些解构赋值, 才发现自己对于ES6的语法缺乏了总结和运用,看得有点艰难,所以重新学习 ...

  4. System.BadImageFormatException”C#报错

    在平常的开发中或多或少会遇到一些问题,而本次向小编这里是自己刚刚解决的一个问题,贴出来与大家分享一下,纠结了一个下午,终于解决了,是有关平台的一个报错问题.   方法/步骤     报错”“Syste ...

  5. SQL Server如何将Id相同的字段合并，并且以逗号隔开

    需要用到stuff函数: 例: id             name           1               张三           1               李四       ...

  6. ruby中的alias和alias_method

    ruby中的alias和alias_method都可以重命名一个方法,它们的区别如下: 1.alias是ruby的一个关键字,因此使用的时候是alias :newname :oldname alias ...

  7. 鼠标移动上去，元素旋转；web前端鼠标经过图片凸起

    .trans-rotate{ -webkit-transition: transform .25s linear; -moz-transition: transform .25s linear; -o ...

  8. eclipse maven install没反应解决办法

    .打开eclipse的Window菜单-->java-->Installed JREs .点击用的jdk,edit,在Default VM arguments里面填入-Dmaven.mul ...

  9. Java将对象保存到文件中/从文件中读取对象

    1.保存对象到文件中 Java语言只能将实现了Serializable接口的类的对象保存到文件中,利用如下方法即可: public static void writeObjectToFile(Obje ...

  10. Spark学习之路 （九）SparkCore的调优之数据倾斜调优

    摘抄自:https://tech.meituan.com/spark-tuning-pro.html 数据倾斜调优 调优概述 有的时候,我们可能会遇到大数据计算中一个最棘手的问题——数据倾斜,此时Sp ...