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 content

2.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.attributes

3.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 style

4.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相关推荐

点击改变div高度_css实现div两列布局（两种方法）
一.应用场景左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应二.思路首先把这个问题分步解决,需要攻克以下两点: 1.让两个div并排到一行 2.让一个div宽度固定,另个div占 ...
解决LC_ALL: 无法改变区域选项 (UTF-8): 没有那个文件或目录的问题
问题: -bash: 警告:setlocale: LC_ALL: 无法改变区域选项 (UTF-8): 没有那个文件或目录 -bash: 警告:setlocale: LC_ALL: 无法改变区域选项 ( ...
Qt中如何改变三角形图形项的包围盒
Bounding Rect 和 Shape 的联系与区别 Bounding Rect 将 item 的外边界定义为矩形,所有绘制必须限制在此区域内,QGraphicsView 使用它来确定 item ...
改变自己，让自己变得更好
在现实生活中,有些时候我们会想着去改变别人,希望别人能顺从自己一点,这样心里会好受一些:但往往让我们想不到的是,每个人都有自己的想法,都有自己的主见: 并不是每个人都能理解你,都会按你的意愿去顺从你的 ...
人要懂得放下已经发生，却又无法改变的事情
在生活中,有些事情如果注定是无法改变的,那么就尽可能快的释怀,要坦然接受,坚强的走出来.毕竟很多事情,不会因为你的悲伤,结果就会改变. 不如,果断看开放下,然后收拾心情重新开展好的事情发展.未来的路还 ...
在批评中改变自己，才能真正取得进步
在工作中难免会遇到上司批评时候,而批评一般有两种:有一种批评是带有情绪的批评,这种批评往往来自于你的上司,因为你工作上的问题激怒了你的上司. 当你面对这样的批评时要微笑,然后倾听,这个时候千万不要辩解 ...
view(*args)改变张量的大小和形状_pytorch reshape numpy
20201227 这个方法是在不改变数据内容的情况下,改变一个数组的格式,参数及返回值,官网介绍: a:数组–需要处理的数据 newshape:新的格式–整数或整数数组,如(2,3)表示2行3列,新的 ...
Android ListView 点击item改变item的背景颜色(ListView实现光标移动)
一下demo 地址实现的效果图如下 ListView 光标移动,实现很是简单,这里是指item背景的改变使用 listSelector listSelector 用户指定当前选中item 的颜色 ...
Ｕbuntu 系统禁止或者改变中文简体切换繁体,方便使用AS全局搜索
使用Ubuntu 系统开发的我们在使用android studio 或者idea 在使用全局搜索的时候发现确实切换中文简体字和繁体字很烦闹,自己也不使用繁体字就把切换禁止了算了下面说下禁止的方法 ...

087_改变html

087_改变html相关推荐

最新文章

热门文章