087_改变html
生活随笔
收集整理的這篇文章主要介紹了
087_改变html
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. html輸出流
1.1. 在JavaScript中, document.write()可用于直接寫入html輸出流:
document.write("hello world");1.2. 千萬不要在文檔加載后使用document.write()。這么做會覆蓋文檔。
2. 改變html內容
2.1. 修改html文檔內容最簡單的方法是使用innerHTML屬性。
2.2. 如需修改html元素的內容, 請使用此語法:
element.innerHTML = new html content2.3. 例子
2.3.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>innerHTML改變html內容</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>我是第一個p</strong>';var classps = document.getElementsByClassName('p');classps[1].innerHTML = '<b>我是第二個p</b>';var qsaP = document.querySelectorAll(".p");qsaP[2].innerHTML = '<em>我是第三個p</em>';</script></body> </html>2.3.2. 效果圖
3. 改變屬性的值
3.1. 如需添加或修改html屬性的值, 請使用如下語法:
element.attribute = new value 或者 element.setAttribute(attribute, new value)3.2. 獲取屬性
element.getAttribute(attributename)3.3. 刪除屬性
element.removeAttribute(attributename)3.4. attributes屬性返回指定節點屬性的集合。
element.attributes3.5. hasAttribute()方法用于判斷是否有指定的屬性存在, 如果存在返回true, 否則返回false。
element.hasAttribute(attributename)3.6. hasAttributes()方法如果某節點有任何屬性時返回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元素的樣式, 請使用此語法:
element.style.property = new style4.2. 如果想一次添加多個樣式, 請使用此語法:
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. 效果圖
總結
以上是生活随笔為你收集整理的087_改变html的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 086_访问html元素
- 下一篇： 098_键盘事件