导航:首页 > 编程语言 > js怎么单击改变标签里的文字

js怎么单击改变标签里的文字

 发布时间：2025-03-01 18:59:03

① js怎么改变<a></a>里面的的文字

思路：获取a对象，然抄后使用innerHTML属性设置标袭签内的文字，关键代码：

document.getElementById(id).innerHTML=something;

实例演示如下:

1、HTML结构

<ahref="#"id="test">超链接的原始文本</a><br>
修改超链接文本：<inputtype="text"id="name">
<inputtype="button"value="修改"onclick="fun()">

2、javascript代码

functionfun(){
	varname=document.getElementById("name").value;
	document.getElementById("test").innerHTML=name;
}

3、效果演示

② javascript修改html <b>标签内容

简单的实现，仅供参考：

<body>
	<bstyle="width:100px;height:100px;border:1pxsolid#ccc;"></b>
</body>
<scripttype="text/javascript">
	varoB=document.getElementsByTagName('b')[0];
	vararr=[1,2,3,4,5,6,7,8,94,1,3,4,5,6];
	oB.onclick=function(){
		oB.innerHTML=arr[Math.floor(Math.random()*arr.length)];//修改回DIV标签里面的内容答
	};
</script>

③ js获取网页当中body里所有标签里面的指定汉字并进行批量替换

我写了代码如下, 测试可行, 供参考:

//主要靠这个函数实现:将body下的文本节点中的searchWord,替换为replaceWord
functionreplaceBodyText(searchWord,replaceWord){
varreg=newRegExp(searchWord,'g');
functionreplaceNode(node){
node.childNodes.forEach(function(v){
if(v.nodeName==='SCRIPT')
return;//排除<script>标签
if(!v.hasChildNodes()){
if(reg.test(v.textContent))
v.textContent=v.textContent.replace(reg,replaceWord);
return;
}
replaceNode(v);
});
}
replaceNode(document.body);
}

//绑定一个事件测试用,点击这个按钮后才会执行;
document.querySelector('#testBtn').addEventListener('click',function(){
replaceBodyText('中国','美国');
});

//实际使用中直接调用函数即可:
//以下语句表示将所有文本节点中的"中国"替换为"美国:
//replaceBodyText('中国','美国');

④ 请教，怎么用jquery或js给button显示文本改变

1、过程如下，首先打开hbuilder软件，在空白文件里写入两个button设置简单的版样式，并分别权设置id属性为btn1和btn2，在下方加入script标签，获取button1的dom元素并给其button标签一个click事件，当点击button1的时候，文字就会改变：

阅读全文

与js怎么单击改变标签里的文字相关的资料

热点内容
淘宝代码隐藏导航不见了 浏览：7
macbookpro如何修改文件内容 浏览：965
java稳定排序 浏览：53
oppo文件管理的图片 浏览：335
plc编程步数怎么计算 浏览：142
ipad看电脑文件 浏览：935
成都制作pdf文件 浏览：735
怎么样点开电脑里面的网络连接 浏览：755
微信怎么退出账号 浏览：32
w微信开发者工具 浏览：325
数据库还原附加 浏览：713
打包成exe执行文件 浏览：652
信丰营销app有哪些 浏览：463
苹果文件下载项如何下载 浏览：179
ps抠婚纱教程 浏览：203
如何在移动硬盘上隐藏文件夹 浏览：451
瑞虎8老车机怎么刷app 浏览：992
学ui设计要学java吗 浏览：275
淘宝票房数据源怎么调整 浏览：470
iphone5s升级ios卡黑屏 浏览：622

友情链接