1.改变html输出流，通过document.write() 直接向 HTML 输出流写内容

  1. <body>
  2.     <p>段落</p>
  3.     <script>
  4.         document.write(Date());
  5.     </script>
  6. </body>

2.改变html内容，document.getElementById(id).innerHTML=''新的html

  1. <p id="p1">Hello World!</p>
  2. <p id="p2">Hello World!</p>
  3. <script>
  4.     document.getElementById("p2").innerHTML="新文本!";
  5. </script>

3.改变html属性，document.getElementById(id).attribute=新属性值

  1. <img id="image" src="smiley.gif" width="160" height="120">
  2. <script>
  3.     document.getElementById("image").height='160';
  4. </script>

会将图片调整为长、宽相等的正方形图片

4.改变css，通过document.getElementById("p1").style.css属性=css属性值

  1. <p id="p1">Hello World!</p>
  2. <p id="p2">Hello World!</p>
  3. <script>
  4.     document.getElementById("p1").style.color='yellow';
  5.     document.getElementById("p2").style.background="red";
  6. </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. nodejs 模块moment格式化时间，获取当前时间的前一天时间

    var moment = require('moment'); moment.locale('zh-cn'); var today = {}; var _today = moment(); today ...

  2. iOS 开发笔记-控制器tab切换view显示

    在开发过程中,我们常常会碰到一种情况就是,在一个controller里面,经常要放很多复杂的控制,最常用的就是tar切换.tar切换,原理就是在一个controller里面,显示另一个controll ...

  3. Web API 入门 二 媒体类型

    还是拿上面 那篇 Web API 入门 一  的那个来讲 在product类中加一个时间属性

  4. 兼容PC和手机触摸代码

    测试环境:unity3d 4.6.1 using UnityEngine; using System.Collections; public class neccc : MonoBehaviour { ...

  5. OEMCC 13.2 集群版本安装部署

    之前测试部署过OEMCC 13.2单机,具体可参考之前随笔: OEMCC 13.2 安装部署 当时环境:两台主机,系统RHEL 6.5,分别部署OMS和OMR: OMS,也就是OEMCC的服务端 IP ...

  6. HDU 2604 Queuing(递推+矩阵)

    Queuing [题目链接]Queuing [题目类型]递推+矩阵 &题解: 这题想是早就想出来了,就坑在初始化那块,只把要用的初始化了没有把其他的赋值为0,调了3,4个小时 = = 本题是可 ...

  7. Jenkins. 安装过程中出现一个错误： No such plugin: cloudbees-folder

    安装过程中出现一个错误: No such plugin: cloudbees-folder 安装插件,有时候会报类似的错误:An error occurred during installation: ...

  8. C#中生成的随机数为什么不随机？

    from:https://www.xcode.me/more/net-csharp-generate-random 随机数生成方法可以说是任何编程语言必备的功能,它的重要性不言而言,在C#中我们通常使 ...

  9. 002-golang安装配置

    1.安装位置: 2.环境变量. path的值如下: 3.工作目录.

  10. ruby自动化之selenium webGUI

    1.下载ruby语言包,windows下需要安装rubyinstall http://railsinstaller.org/en 2.cmd命令下安装selenium-webdriver gem包 g ...