整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

javascript修改元素本身的HTML代码的方法

天遇到个来咨询利用原生的JS代码来修改HTML代码的的童鞋,耐心的给这个童鞋做了解答后,然后整理了一下测试代码,写成文章记录一下,方便以后有同需求的站长们。

目标需求

HTML原始代码

<form action="" method="post" class="form">
 <input id="mm" type="text" >
 <input id="mochu" type="text" onclick="act(this.value)" />
 <input id="mc" type="text" >
</form>

目标要求:

利用JS代码将以上HTML代中的 id 为 mochu 的 input 中的 cnclick 属性去掉

<input id="mochu" type="text" onclick="act(this.value)" />

换成

<input id="mochu" type="text" />

解决方案

利用 JS中dom对象的 outerHTML 属性,可以轻松的解决这个问题

outerHTML:设置或获取对象及其内容的 HTML 形式

例:JS获取元表本身的HTML代码

代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<form action="" method="post" class="form">

<input id="mm" type="text" value="飞鸟慕鱼博客" >

<input id="mochu" type="text" onclick="act(this.value)" value="http://www.feiniaomy.com" />

<input id="mc" type="text" >

</form>

<script>

var html = document.getElementById('mochu').outerHTML;

console.log(html);

</script>

</body>

</html>

打印结果:

例:js修改指定元素的本身的HTML代码

通上面的例子,可以知道 outerHTML 属性可以获取到元素本身的HTML代码,既然可以获取也能设置或修改元素本身的代码

代码:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post" class="form">
 <input id="mm" type="text" value="飞鸟慕鱼博客" >
 <input id="mochu" type="text" onclick="act(this.value)"/>
 <input id="mc" type="text" >
</form>
<script>
 var html = document.getElementById('mochu').outerHTML = '<input id="mochu" type="text" value="http://www.feiniaomy.com" />';
</script>
</body>
</html>

运行结果如图所示

补充说明

以下是与 outerHTML 功能相似的属性,下一篇文章会详细说明一下他们的作用与区别

innerHTML:设置或获取对象起始标签和结束标签之间的内容。

innerText:设置或获取位于对象起始和结束标签内的文本

outerHTML:设置或获取对象及其内容的 HTML 形式

outerText:设置或获取对象的文本

TML常用代码之:修改页面的实用性HTML代码

贴图:<img src="图片地址">

加入连接:<a href="所要连接的相关地址">写上你想写的字</a>

在新窗口打开连接:<a href="相关地址" target="_blank">写上要写的字</a>

移动字体(走马灯):<marquee>写上你想写的字</marquee>

字体加粗:<b>写上你想写的字</b>

字体斜体:<i>写上你想写的字</i>

字体下划线: <u>写上你想写的字</u>

字体删除线: <s>写上你想写的字</s>

字体加大: <big>写上你想写的字</big>

字体控制大小:<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大,h5最小)

更改字体颜色:<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间

消除连接的下划线:<a href="相关地址" style="text-decoration:none">写上你想写的字</a>

贴音乐:<embed src="音乐地址" width="宽度" height="高度" autostart=false>

贴flash: <embed src="flash地址" width="宽度" height="高度">

贴影视文件:<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>

换行:<br>

段落:<p>段落</p>

原始文字样式:<pre>正文</pre>

换帖子背景:<body background="背景图片地址">

固定帖子背景不随滚动条滚动:<body background="背景图片地址" body bgproperties=fixed>

定制帖子背景颜色:<body bgcolor="#value">(value值见10)

帖子背景音乐:<bgsound="背景音乐地址" loop=infinite>

贴网页:<iframe. src="相关地址" width="宽度" height="高度"></iframe>

果你需要在网页上创建标题,或者在网站上改变不同页面上的文本大小,或段落中的某个特定单词突出,可以通过使用html命令更改文本大小来做到这一点。但凡上过html培训学习的人都会很轻轻松学会这个操作,有导师指导,学起来要容易的多。

更改前,先备份

无论什么时候你要更改网页,无论你只是在html中更改文本大小,还是在添加照片或将背景图像更改为新模式时,在更改前始终要记住一点:备份你现有的页面。这将确保如果在更改期间发生错误,并且此错误导致网页丢失,则可以恢复到起始位置,然后再试一次。

若要复制网页,请打开该文件并复制html。然后将页面html的副本粘贴到一个程序中,比如程序员的记事本,这是一个免费的实用程序,供网页设计者/程序员使用,用于CSS、html和其他程序。

在更改的操作中,备份是经常要做的事,这一点非常重要,一般你在html培训学习时,老师都会强调这一点的。

如何在HTML中更改文本大小

首先,找到要更改的一行或多行文本。使用

这个标记

在html中更改文本大小是一个简单的编码问题,你可以学会自己做,你也可以使用各种额外的html技巧。通过参加html培训学习,对html会有更系统更全面的认识,零基础也能轻松学到有用的知识。

了解更多