改变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. 《算法导论》— Chapter 11 散列表

    1 序 在很多应用中,都要用到一种动态集合结构,它仅支持INSERT.SEARCH以及DELETE三种字典操作.例如计算机程序设计语言的编译程序需要维护一个符号表,其中元素的关键字为任意字符串,与语言 ...

  2. POJ 1201 Intervals（差分约束 区间约束模版）

    关于差分约束详情可阅读:http://www.cppblog.com/menjitianya/archive/2015/11/19/212292.html 题意: 给定n个区间[L,R], 每个区间至 ...

  3. 3.3.4 使用 awk 重新编排字段

    awk 本身所提供的功能完备,已经是一个很好用的程序语言了.以后会好好地介绍该语言的精髓.虽然 awk 能做的事很多,但它主要的设计是要在 Shell脚本中发挥所长:做一些简单的文本处理,例如取出字段 ...

  4. 理解js的几个关键问题（1）：全局变量new和关于hasOwnPropery和PropertyIsEnumerable 等

    一.作用域和全局变量 var test=function(){ var a=1; setTimeout(function(){ console.log(a); a=2; },1000); a=3; s ...

  5. 大数据学习——关于hive中的各种join

    准备数据 2,b 3,c 4,d 7,y 8,u 2,bb 3,cc 7,yy 9,pp 建表: create table a(id int,name string) row format delim ...

  6. hdu 1500 dp

    /* 状态转移方程式: dp[i][j]=Min(dp[i][j-1],dp[i-1][j-2]+(a[j-1]-a[j])*(a[j-1]-a[j])); 依次求出第i个人在第j个数时的所求的最小值 ...

  7. [转]Fedora22添加国内软件源和本地软件源

    Fedora22添加国内软件源和本地软件源 Linux系统和Windows系统一个很大的区别就是软件安装方式,windows系统下安软件,我们去相应的网站下载软件安装包离线安装就可以了.虽然Linux ...

  8. js1：对象的学习，构造函数，继承构造函数【使用教材：JavaScript深度剖析第2版】

    原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>js</title> & ...

  9. Python基础教程笔记——第6章：抽象（函数）

    (1)计算裴波那契数列: fbis=[0,1] num=int(input("please input the number")) for i in range(num-2): f ...

  10. tomcat启动提示java.lang.UnsatisfiedLinkError: D:\soft\devTool\apache-tomcat-7.0.57\bin\tcnative-1.dll: C

    https://blog.csdn.net/a274360781/article/details/52411984