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. gerrit设置默认rebase以及禁用分支

    1.设置默认rebase 在工程配置中设置: 2.禁用分支 Refrance:refs/for/refs/heads/分支名 禁用权限:push  “Block”   (这样就禁止了开发者往这个分支上 ...

  2. node加密解密 crytpo

    var crypto = require('crypto'); exports.encrypt = function (str, secret) { var cipher = crypto.creat ...

  3. visual studio Lua 调试

    BabeLua是一款基于VS (简称VS)的免费开源的Lua集成开发环境,在Lua编辑和调试方面,具有如下功能和特性: ●Lua语法高亮 ●语法检查 ●自动补全 ●一键注释 ●格式化代码 ●自定义代码 ...

  4. Spring @Value注解 and Spring Boot @ConfigurationProperties注解

    一.Spring的@Value Spring EL表达式语言,支持在XML和注解中表达式,类是于JSP的EL表达式语言. 在Spring开发中经常涉及调用各种资源的情况,包含普通文件.网址.配置文件. ...

  5. RNN通俗理解

    让数据间的关联也被 NN 加以分析,我们人类是怎么分析各种事物的关联,?最基本的方式,就是记住之前发生的事情. 那我们让神经网络也具备这种记住之前发生的事的能力. 再分析 Data0 的时候, 我们把 ...

  6. mybatis之接口绑定

    接口绑定方案 mybatis中,提供了一套接口绑定方案,程序员可以提供一个接口,然后提供对应接口的一个mapper.xml文件.MyBatis会自动将接口和xml文件进行绑定.实际上就是mybatis ...

  7. windows连接远程win服务器失败，win7win10都存在此问题，显示出现身份验证错误，要求的函数不受支持，可能由于CredSSP加密Oracle修正 （原）

    之前电脑windows+mstsc连接另一个windows服务器正常登陆,可在更新本地系统为win10以后,登陆就出现了问题,提示的错误是,出现身份验证错误.要求的函数不受支持,可能由于CredSSP ...

  8. Java第一次考试作业

    这次考试感觉自己充分的意识到自己的不足,对于Java没有系统的理解,敲程方面也有很大问题,本次程序题目为ATM机的账户记录Account有账户的唯一性标识,用户的姓名,操作日期(Date),操作类型, ...

  9. undefined reference 问题各种情况分析

    扒自网友文章 关于undefined reference这样的问题,大家其实经常会遇到,在此,我以详细地示例给出常见错误的各种原因以及解决方法,希望对初学者有所帮助. 1.  链接时缺失了相关目标文件 ...

  10. animator 新动画

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class Animator ...