js通过DOM改变html和css
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的更多相关文章
- JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...
- 【CSS】398- 原生JS实现DOM爆炸效果
爆炸动效分享 前言 此次分享是一次自我组件开发的总结,还是有很多不足之处,望各位大大多提宝贵意见,互相学习交流. 分享内容介绍 通过原生js代码,实现粒子爆炸效果组件 组件开发过程中,使用到了公司内部 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- JS的DOM操作及动画
JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...
- js的dom对象(带实例超详细全解)
js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...
- JS的DOM操作语法
整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- JS基础-DOM
DOM DOM 事件的级别 DOM 事件模型 DOM 事件流 DOM 事件捕获的具体流程 Event 对象的常见应用 自定义事件 DOM概述 | MDN DOM | MDN DOM操作 DOM事件级别 ...
- JS 07 Dom
DOM(Document Object Model): 结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容. 结点类型 1.元素结点 2.属性结点 3.文本结点 结点的注意 ...
- js的dom操作(整理)(转)
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
随机推荐
- Py中re.sub学习【转载】
转自:https://www.crifan.com/python_re_sub_detailed_introduction/ //这个网址讲的不错. 1.re.sub的功能 re是regular ex ...
- 【LeetCode每天一题】3Sum Closest(最接近的三数和)
Given an array nums of n integers and an integer target, find three integers in nums such that the s ...
- 服务请求比较慢SYN flooding
服务请求比较慢 dmesg 查看日志,发现SYN flooding 问题,某一端口居多 内核输出“TCP: Possible SYN flooding on port”信息,在内核syncookie机 ...
- Kibana5.x界面简要介绍(含x-pack插件)
简介:Kibana是一个为 ElasticSearch 提供的数据分析的 Web 接口(5601).可使用它对日志进行高效的搜索.可视化.分析等各种操作.Kibana目前最新的版本5.3.X-Pack ...
- unity3d-游戏实战突出重围,第二天 制作血条
using UnityEngine; using System.Collections; public class xt : MonoBehaviour { //红色血条 public Texture ...
- shell基础:环境变量
子shell是在父shell中打开的shell. 使用pstree查看进程树. $调用环境变量 set查看所有变量内容, env查询环境变量 只是临时改变
- ECshop后台新功能权限添加
ecshop后台新功能权限的添加 1.在后台“推荐管理”里添加“推荐人分成”.“会员分成”两个操作功能以及权限 index.php?act=menu incluedes/inc_priv.php:权限 ...
- sqli-labs(十五)(堆叠注入)
第三十八关: 后面好几关都是堆叠注入.简单介绍下: Stacked injections:堆叠注入.从名词的含义就可以看到应该是一堆sql语句(多条)一起执行.而在真实的运用中也是这样的,我们知道在m ...
- codeforces 185A Plant(推公式)
Plant [题目链接]Plant [题目类型]推公式 &题解: 这个是可以推公式的: 每年的总个数是4^n个,设n年时向上的个数是x个,向下的个数是y个,那么n+1年时,向上的个数是3* x ...
- HDU 1757 A Simple Math Problem(矩阵)
A Simple Math Problem [题目链接]A Simple Math Problem [题目类型]矩阵快速幂 &题解: 这是一个模板题,也算是入门了吧. 推荐一个博客:点这里 跟 ...