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. jenkins 新增用户和修改用户名密码

    在某些条件下,jenkins是不允许注册用户的,这是,你可以采用如下的方式来新增用户,对于老的用户,忘记密码了,使用如下方式来重置密码. 1.系统管理-->管理用户 ----> 新建用户 ...

  2. [LeetCode] 130. Surrounded Regions_Medium tag: DFS/BFS

    Given a 2D board containing 'X' and 'O' (the letter O), capture all regions surrounded by 'X'. A reg ...

  3. (转载)cmd-命令大全及详解

    原文地址:http://greatverve.cnblogs.com/archive/2011/12/09/windows-cmd.html 命令简介 cmd是command的缩写.即命令行 . 虽然 ...

  4. 查看Andorid应用是32位还是64位

    adb shell cat /proc/进程pid/maps 查看linker位数即可

  5. cocos2d JS 自定义事件分发器(接收与传递数据) eventManager

    简而言之,它不是由系统自动触发,而是人为的干涉 较多情况用于传递数据 var _listener1 = cc.EventListener.create({ event: cc.EventListene ...

  6. TP引用样式表和js文件及验证码

    TP引用样式表和js文件及验证码 引入样式表和js文件 <script src="__PUBLIC__/bootstrap/js/jquery-1.11.2.min.js"& ...

  7. mysql存储过程或函数中传入参数与表字段名相同引发的悲剧

    真实案例.如下的一个存储过程: create procedure Apple(in user_id int) begin delete from users where user_id = user_ ...

  8. innerText 与 innerHtml的区别

    j基本语法类似: innerHTML/innerText ->给除了表单元素的标签赋值内容 document.getElementById("div1").innerHTML ...

  9. Redis实现分布式Session

    相关博客: http://www.cnblogs.com/yanweidie/p/4763556.html http://www.cnblogs.com/lori/p/5368722.html?utm ...

  10. ==与Equals的作用

    string str1 = "Blackteeth"; string str2 = str1; string str3 = "Blackteeth"; Cons ...