JavaScript改变Html与CSS基本方法

1.改变 HTML 输出流

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

<script>
document.write(Date());
</script>

2.改变 HTML 内容

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

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

3.改变了 <h1> 元素的内容

<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
  • 上面的 HTML 文档含有 id=”header” 的 <h1> 元素
  • 我们使用 HTML DOM 来获得 id=”header” 的元素
  • JavaScript 更改此元素的内容 (innerHTML)

4.如需改变 HTML 元素的属性

document.getElementById(id).attribute=new value

5.改变了 <img> 元素的 src 属性

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

6.改变 HTML 样式

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

“Hello World”样式被更改为蓝色

7.改变了 id=”id1″ 的 HTML 元素的样式,当用户点击按钮时触发事件

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

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

//下面是隐藏和显示元素
<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'" />

基本语法就是这样的,用document.getElementById查找html中的id,更改其属性。

属性可参考:www.w3school.com.cn/jsref/dom_obj_style.asp

 

分享到:

发表评论

电子邮件地址不会被公开。 必填项已用*标注