當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

087_改变html

發(fā)布時(shí)間：2025/4/17 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 087_改变html 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. html輸出流

1.1. 在JavaScript中, document.write()可用于直接寫入html輸出流:

document.write("hello world");

1.2. 千萬不要在文檔加載后使用document.write()。這么做會(huì)覆蓋文檔。

2. 改變html內(nèi)容

2.1. 修改html文檔內(nèi)容最簡(jiǎn)單的方法是使用innerHTML屬性。

2.2. 如需修改html元素的內(nèi)容, 請(qǐng)使用此語法:

element.innerHTML = new html content

2.3. 例子

2.3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>innerHTML改變html內(nèi)容</title></head><body><div id="div1"></div><span id="span1"></span><p class="p"></p><p class="p"></p><p class="p"></p><script type="text/javascript">var div1Element = document.getElementById('div1');div1Element.innerHTML = '我是div';var span1Element = document.getElementById('span1');span1Element.innerHTML = '我是span';var ps = document.getElementsByTagName('p');ps[0].innerHTML = '<strong>我是第一個(gè)p</strong>';var classps = document.getElementsByClassName('p');classps[1].innerHTML = '<b>我是第二個(gè)p</b>';var qsaP = document.querySelectorAll(".p");qsaP[2].innerHTML = '<em>我是第三個(gè)p</em>';</script></body> </html>

2.3.2. 效果圖

3. 改變屬性的值

3.1. 如需添加或修改html屬性的值, 請(qǐng)使用如下語法:

element.attribute = new value 或者 element.setAttribute(attribute, new value)

3.2. 獲取屬性

element.getAttribute(attributename)

3.3. 刪除屬性

element.removeAttribute(attributename)

3.4. attributes屬性返回指定節(jié)點(diǎn)屬性的集合。

element.attributes

3.5. hasAttribute()方法用于判斷是否有指定的屬性存在, 如果存在返回true, 否則返回false。

element.hasAttribute(attributename)

3.6. hasAttributes()方法如果某節(jié)點(diǎn)有任何屬性時(shí)返回true, 否則返回false。

element.hasAttributes()

3.7. 例子

3.7.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>innerHTML改變html屬性</title></head><body><a id="a">百度</a> <br /><br /><img src="" alt="CrashBtn.png" /><script type="text/javascript">var a = document.getElementById('a');function addHref(){a.href = 'http://www.baidu.com';}function attributesOnA(){var as = a.attributes;var asArr = Array.prototype.slice.call(as);var value = "";for(let ids in asArr){var node = asArr[ids];value += node.name + ": " + node.value + "\r\n";}alert(value);}function removeHref(){a.removeAttribute('href');}var imgs = document.getElementsByTagName('img');function modifySrc(){imgs[0].setAttribute('src', 'CrashBtn.png');}function getSrc(){alert(imgs[0].getAttribute('src'));}function imgHasAttribute(){alert(imgs[0].hasAttribute('src'));}function bodyHasAttributes(){alert(document.body.hasAttributes());}</script><br /><br /><button onclick="addHref()">添加href屬性</button> <button onclick="modifySrc()">修改src屬性</button> <button onclick="attributesOnA()">a元素的屬性集合</button> <button onclick="getSrc()">獲取src屬性</button><br /><br /><button onclick="bodyHasAttributes()">body元素是否有屬性</button><button onclick="imgHasAttribute()">img元素是否有src屬性</button> <button onclick="removeHref()">刪除href屬性</button></body> </html>

3.7.2. 效果圖

4. 改變CSS

4.1. 如需更改html元素的樣式, 請(qǐng)使用此語法:

element.style.property = new style

4.2. 如果想一次添加多個(gè)樣式, 請(qǐng)使用此語法:

element.style.cssText = 'font-size: 32px; background-color: grey;'

4.3. 例子

4.3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>改變CSS</title></head><body><a id="a" href="#">百度</a> <a id="b" href="#">百度</a> <script type="text/javascript">var a = document.getElementById('a');a.style.color = 'rgb(144, 11, 9)'; // 字體顏色a.style.fontSize = '32px'; // 字體大小a.style.backgroundColor = 'grey'; // 背景色a.style.display = 'inline-block';a.style.width = '300px';a.style.height = '100px';a.style.lineHeight = '100px';a.style.textAlign = 'center';var b = document.getElementById('b');b.style.cssText = 'color: rgb(144, 11, 9); font-size: 32px; background-color: grey; display: inline-block; width: 300px; height: 100px; line-height: 100px; text-align: center';</script></body> </html>

4.3.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的087_改变html的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

html