改变HTML输出流:

在JavaScript中,document.write() 可用于直接向HTML输出流写内容

 <!DOCTYPE html>
<html>
<body> <script>
document.write(Date());
</script> </body>
</html>

不要再文档加载之后使用document.writr()  这会覆盖文档。

改变HTML内容

修改HTML内容最简单的方法时使用innerHTML属性

 <html>
<body> <p id="p1">Hello World!</p> <script>
document.getElementById("p1").innerHTML="New text!";
</script> </body>
</html>

改变HTML属性

本例改变了<img>元素的src属性

 <!DOCTYPE html>
<html>
<body> <img id="image" src="smiley.gif"> <script>
document.getElementById("image").src="landscape.jpg";
</script> </body>
</html>

改变HTML元素的样式

本例改变了id="id1" 的HTML元素的样式,当用户点击按钮时:

 <h1 id="id1">My Heading 1</h1>

 <button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

使元素可见或不可见:

 <!DOCTYPE html>
<html>
<body> <p id="p1">这是一段文本。</p> <input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" /> </body>
</html>

javaScript改变HTML的更多相关文章

  1. 客户端的javascript改变了asp.net webform页面控件的值,后台代码中如何获取修改后的值。

    客户端的javascript改变了asp.net webform页面控件的值,后台代码中如何获取修改后的值.     无论是什么的html控件,只要加上了runat="server" ...

  2. 实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听

    思路:通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触 ...

  3. javascript改变样式(cssFloat,styleFloat)

    昨天遇到一用js改变元素浮动的,当时直接写了 obj.style.float="left";结果没起作用:查了资料后才发现不能这样写,现在整理下几种样式写法 1,直接写css属性的 ...

  4. javascript改变style样式和css样式

    转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...

  5. js | javascript改变style样式和css样式

    转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...

  6. 5.JavaScript改变样式,验证用户输入

    ① x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式 ② if ...

  7. 使用javascript改变图片路径

    效果预览:http://keleyi.com/keleyi/phtml/jstexiao/16.htm 代码如下: <!DOCTYPE html> <html> <hea ...

  8. 通过JavaScript改变HTML样式

    语法:Object.style.property=new style; 基本属性表如下: 示例: 改变 <p> 元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝: <p id ...

  9. javascript改变背景/字体颜色(Through the javascript to change the background and font color)

    鼠标移动到.移出DIV时修改DIV的颜色: 1.Change the font and Div background color--function <div style="width ...

随机推荐

  1. Tomcat启动慢(运行shutdown.sh的时候报错)

    Using CATALINA_BASE: /usr/local/tomcatUsing CATALINA_HOME: /usr/local/tomcatUsing CATALINA_TMPDIR: / ...

  2. manjaro xfce 18.0 踩坑记录

    manjaro xfce 18.0 踩坑记录 1 简介1.1 Manjaro Linux1.2 开发桌面环境2 自动打开 NumLock3 系统快照3.1 安装timeshift3.2 使用times ...

  3. python基础——4(数字、字符串、列表类型的内置方法介绍)

    目录 一.可变与不可变类型 二.数字类型 三.字符串类型 四.列表类型 一.可变与不可变类型 可变类型:值改变,但是id不变,证明就是在改变原值,是可变类型 不可变类型:值改变,id也跟着改变,证明产 ...

  4. 了解DOM

    DOM是为了方便处理层次型文档(如XML.HTML)的一种技术.DOM还提供了一套API,使开发人员可以用面向对象的方式来处理这些文档.对于XML文档来说,有专门的处理XML文档是XML  DOM,一 ...

  5. 大数据学习——shell编程

    03/ shell编程综合练习 自动化软件部署脚本 3.1 需求 1.需求描述 公司内有一个N个节点的集群,需要统一安装一些软件(jdk) 需要开发一个脚本,实现对集群中的N台节点批量自动下载.安装j ...

  6. [HDU3062]Party(2-sat)

    传送门 2-sat问题,只需要判断yes或no 所以可以直接连边,缩点,判断同一组的是否在同一个块中. #include <cstdio> #include <stack> # ...

  7. BZOJ 1509[NOI 2003]逃学的小孩 树形dp

    1509: [NOI2003]逃学的小孩 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 995  Solved: 505[Submit][Status][ ...

  8. 2016 Multi-University Training Contest 2 solutions BY zimpha

    Acperience 展开式子, \(\left\| W-\alpha B \right\|^2=\displaystyle\alpha^2\sum_{i=1}^{n}b_i^2-2\alpha\su ...

  9. 微服务架构的基础框架选择:Spring Cloud还是Dubbo?

    本文转自:http://mt.sohu.com/20160803/n462486707.shtml 最近一段时间不论互联网还是传统行业,凡是涉及信息技术范畴的圈子几乎都在讨论 微服务架构 .近期也看到 ...

  10. HDU 1558

    输入线段的两个短点,如果线段相交那么他们属于一个集合,查看第i条线段所在的集合有几条线段. 好久没码码了,总是各种蠢. 首先找出两条直线的方程,求解相交点的横坐标,然后看是不是在线段内部. 没有注意题 ...