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. [LeetCode] 154. Find Minimum in Rotated Sorted Array II_Hard

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  2. [LeetCode] 619. Biggest Single Number_Easy tag: SQL

    Table number contains many numbers in column num including duplicated ones.Can you write a SQL query ...

  3. Elasticsearch集群管理工具head插件安装

    Elasticsearch-head是一个elasticsearch的集群管理工具,它是完全由html5编写的独立网页程序,你可以通过插件把它集成到es.或直接下载源码,在本地打开index.html ...

  4. securecrt配置经验总结(home.key和颜色）

    还是用securecrt portable方便,配好了,换个机器,打包拷贝过去就行了.不用从两个地方去打包. 参考了网上的资料,颜色参考http://www.jackxiang.com/post/58 ...

  5. 深入理解Java虚拟机2-chap3-斗之气9段

    一.GC需要完成三件事 哪些内存需要回收:找出不需要使用的对象 什么时候回收:JVM空闲/堆内存紧张 如何回收:回收垃圾的策略 二.寻找已死对象:第一件事 判断对象是否存活算法 1.引用计数算法 原理 ...

  6. Nginx性能调优

    [调优]Nginx性能调优   一.Nginx优化配置 1.主配置文件优化:# vi /usr/local/nginx/conf/nginx.conf------------------------- ...

  7. fang99-三号线与四号线新盘

    三号线与四号线新盘 http://www.fang99.com/buycenter/buildingsearch_map.aspx?projectid=0000011104 http://www.fa ...

  8. [13]Windows 内核情景分析 --- 网络通信

    典型的基于tcpip协议套接字方式的网络通信模块层次: 应用程序 socket api WS2_32.dll socket irp Afd.sys tdi irp Tcpip.sys 回调函数接口 各 ...

  9. Necklace of Beads （polya定理的引用）

    Beads of red, blue or green colors are connected together into a circular necklace of n beads ( n &l ...

  10. IO model

    上节的问题: 协程:遇到IO操作就切换. 但什么时候切回去呢?怎么确定IO操作完了? 很多程序员可能会考虑使用“线程池”或“连接池”.“线程池”旨在减少创建和销毁线程的频率,其维持一定合理数量的线程, ...