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. Py中re.sub学习【转载】

    转自:https://www.crifan.com/python_re_sub_detailed_introduction/ //这个网址讲的不错. 1.re.sub的功能 re是regular ex ...

  2. 【LeetCode每天一题】3Sum Closest（最接近的三数和）

    Given an array nums of n integers and an integer target, find three integers in nums such that the s ...

  3. 服务请求比较慢SYN flooding

    服务请求比较慢 dmesg 查看日志,发现SYN flooding 问题,某一端口居多 内核输出“TCP: Possible SYN flooding on port”信息,在内核syncookie机 ...

  4. Kibana5.x界面简要介绍（含x-pack插件）

    简介:Kibana是一个为 ElasticSearch 提供的数据分析的 Web 接口(5601).可使用它对日志进行高效的搜索.可视化.分析等各种操作.Kibana目前最新的版本5.3.X-Pack ...

  5. unity3d-游戏实战突出重围，第二天 制作血条

    using UnityEngine; using System.Collections; public class xt : MonoBehaviour { //红色血条 public Texture ...

  6. shell基础：环境变量

    子shell是在父shell中打开的shell. 使用pstree查看进程树. $调用环境变量 set查看所有变量内容, env查询环境变量 只是临时改变

  7. ECshop后台新功能权限添加

    ecshop后台新功能权限的添加 1.在后台“推荐管理”里添加“推荐人分成”.“会员分成”两个操作功能以及权限 index.php?act=menu incluedes/inc_priv.php:权限 ...

  8. sqli-labs(十五)(堆叠注入)

    第三十八关: 后面好几关都是堆叠注入.简单介绍下: Stacked injections:堆叠注入.从名词的含义就可以看到应该是一堆sql语句(多条)一起执行.而在真实的运用中也是这样的,我们知道在m ...

  9. codeforces 185A Plant(推公式)

    Plant [题目链接]Plant [题目类型]推公式 &题解: 这个是可以推公式的: 每年的总个数是4^n个,设n年时向上的个数是x个,向下的个数是y个,那么n+1年时,向上的个数是3* x ...

  10. HDU 1757 A Simple Math Problem(矩阵)

    A Simple Math Problem [题目链接]A Simple Math Problem [题目类型]矩阵快速幂 &题解: 这是一个模板题,也算是入门了吧. 推荐一个博客:点这里 跟 ...