改变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. POJ 3659 Cell phone Network （树的最小点覆盖， 树形DP）

    题意: 给定一棵树,每个点可以覆盖自己和相邻的点, 求最少要多少个点覆盖图 #include <cstdio> #include <cstring> #include < ...

  2. 如何在小程序实现图片lazy-load懒加载效果

    自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...

  3. ACboy needs your help（分组背包）

    ACboy has N courses this term, and he plans to spend at most M days on study.Of course,the profit he ...

  4. poj 3417 Network 题解

    题意: 先给出一棵树,然后再给出m条边,把这m条边连上,然后剪掉两条边,一条是原边,一条是新边,问有多少种方案能使图不连通. 思路: 从原边的角度看 1.树加边,一定成环,加一条(u,v)边就有u-& ...

  5. FZU 1686 dlx重复覆盖

    #include <iostream> #include <cstring> #include <cstdio> #include <algorithm> ...

  6. [luoguP1627] 中位数（模拟？）

    传送门 水题,怎么评到这个难度的? #include <cstdio> #include <iostream> #define N 200001 int n, b, p, an ...

  7. 【收藏】下载Chrome商店插件的方法，万恶的gwd

    以下是下载离线插件包的方法: 第一步: 每个Google Chrome扩展都有一个固定的ID,例如https://chrome.google.com/webstore/detail/bfbmjmiod ...

  8. 牛客网 牛客网暑期ACM多校训练营（第三场）E KMP

    链接:https://www.nowcoder.com/acm/contest/141/E 题目描述 Eddy likes to play with string which is a sequenc ...

  9. React学习及实例开发（二）——用Ant Design写一个简单页面

    本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.引入Ant Design 1.安装antd yarn add antd 2.引入 react-app-re ...

  10. 利用Cufon技术渲染文字的简单示例

    Cufon是一种能够根据指定的字体渲染文字的技术.今天试用了下,主要有几个步骤: 1.下载Cufon.js(http://cufon.shoqolate.com/generate/) 2.获取需要渲染 ...