改变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. ArrayList练习之存储自定义对象并遍历

    新建一个Student.java类 Student.java /* * 这是一个学生类 */ public class Student { private String name; private i ...

  2. E-R图

    百度百科:E-R图 100多个数据库,一万多张表,能否使用一张E-R图来表示呢?它是可以的.数据设计依赖于企业的数据,而不是数据库的设计,对企业数据适当做归类,会直接导致数据设计,最终画出E-R图,数 ...

  3. 『NYIST』第八届河南省ACM竞赛训练赛[正式赛一]CF-236B. Easy Number Challenge

    B. Easy Number Challenge time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  4. Linux核心参数Shmmax,shmall,shmni

    Linux 下核心参数调整 kernel.shmmax shmmax是核心参数中最重要的参数之一,用于定义单个共享内存段的最大值,shmmax设置应足够大,能在一个共享内存段下容纳下整个的SGA,设置 ...

  5. [HNOI2004]宠物收养场（Treap）

    洛谷传送门 这题真是恶心,一开始没理解题意. 原来如果有狗,狗就会存在收养场中,直到有人来领养: 如果有人,人也会存在收养场中,直到有狗来被领养. 就是建一个treap,狗来把狗插进去,人来后把狗领养 ...

  6. POJ 1276 Cash Machine 【DP】

    多重背包的模型,但一开始直接将N个物品一个一个拆,拆成01背包竟然T了!!好吧OI过后多久没看过背包问题了,翻出背包九讲看下才发现还有二进制优化一说........就是将n个物品拆成系数:1,2,4, ...

  7. 洛谷P2058 海港

    题目描述 小K是一个海港的海关工作人员,每天都有许多船只到达海港,船上通常有很多来自不同国家的乘客. 小K对这些到达海港的船只非常感兴趣,他按照时间记录下了到达海港的每一艘船只情况:对于第i艘到达的船 ...

  8. [USACO12MAR]拖拉机

    题目描述 After a long day of work, Farmer John completely forgot that he left his tractor in the middle ...

  9. Pick-up sticks--poj2653(判断两线段是否相交)

    http://poj.org/problem?id=2653 题目大意:有n根各种长度的棍   一同洒在地上 求在最上面的棍子有那几个 分析:  我刚开始想倒着遍历  因为n是100000   想着会 ...

  10. Edit Distance(动态规划，难)

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...