通过 js 修改 html 的文本内容或者样式
通过 js 修改 html 的文本内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xiao001</title>
</head>
<body>
<h1>this is a js and html code</h1>
<p id = "demo">点击按钮将此处文本替换</p>
<button type="button" onclick="my_function()">点我</button> <script type="text/javascript">
function my_function() {//替换demo里面的文本内容
document.getElementById("demo").innerHTML = "Hello javascript!";
}
</script> </body>
</html>
同时我们可以发现，只要在对应 id 所在标签所包含的文本都会被替换，包括其下级标签包含的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xiao001</title>
</head>
<body>
<h1>this is a js and html code</h1>
<div id = "demo">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<p>this will be replace too</p>
</div>
<button type="button" onclick="my_function()">点我</button> <script type="text/javascript">
function my_function() {//替换demo里面的文本内容
document.getElementById("demo").innerHTML = "Hello javascript!";
}
</script> </body>
</html>
通过 js 修改 html 样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xiao001</title>
</head>
<body>
<p id="demo">change the color of this paragraph</p>
<button type="button" onclick="my_function()">do it</button> <script type="text/javascript">
function my_function() {
var cnt = document.getElementById('demo');//找到元素
cnt.style.color = "#ff0000";//改变样式
}
</script>
</body>
</html>
同理，只要在对应 id 所在标签所包含的样式都会做出对应变化，包括其下级标签中的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xiao001</title>
</head>
<body>
<div id="demo">
change the color of this paragraph
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<button type="button" onclick="my_function()">do it</button> <script type="text/javascript">
function my_function() {
var cnt = document.getElementById('demo');//找到元素
cnt.style.color = "#ff0000";//改变样式
}
</script>
</body>
</html>
通过 js 修改 html 的文本内容或者样式的更多相关文章
- js即时监听文本内容
<script type="text/javascript"> //其他浏览器 function OnInput (event) { alert ("文本内容 ...
- JS双击div编辑文本内容
HTML代码: <div class="album"> <div class="image"><a href="java ...
- kindeditor编辑器修改文本后保存时发现获取到的内容还是修改前的文本内容
定义kindeditor的时候要加上一下几个属性设置: KindEditor.ready(function(K) { var editor = K.create("textarea[name ...
- js 修改字符串中某些字符的样式
var str = 'abcdefghijklmnobqrstuvwxyz'; function HightLight(e){ var reg = new RegExp(e, 'g') str = s ...
- JS中通过id或者class获取文本内容
一.JS通过id获取文本内容 二.JS通过class获取文本内容
- js获取子节点和修改input的文本框内容
js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...
- jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- JS修改标签中的文本且不影响其中标签
/********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * ...
- Cleave.js – 自动格式化表单输入框的文本内容
Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...
随机推荐
- js中的Generators函数
js中的Generators函数 generator一般操作 generator函数的作用就是函数体分段执行,yield表示分隔点 function *test() { console.log(1); ...
- srvctl和crs_start命令无法启动oracle RAC实例, 但sqlplus可以启动
今天遇到一个奇怪问题,发现srvctl和crs_start命令无法启动Oracle RAC实例,但用sqlplus却可以正常启动.最终发现原因是在OCR中数据库的状态变成了disable,将此状态更改 ...
- 「小程序JAVA实战」微信小程序简介（一）
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-01/ 一直想学习小程序,苦于比较忙,加班比较多没时间,其实这都是理由,很多时候习惯了搬砖,习惯了固 ...
- 你不知道的js异步、作用域、闭包
例题如下: for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0) ...
- django 基于正则表达式的url
方式一: urls.py from mytest import views urlpatterns = [ url(r'^index-(\d+)-(\d+).html', views.Index.as ...
- Hadoop IO基于文件的数据结构详解【列式和行式数据结构的存储策略】
Charles所有关于hadoop的文章参考自hadoop权威指南第四版预览版 大家可以去safari免费阅读其英文预览版.本人也上传了PDF版本在我的资源中可以免费下载,不需要C币,点击这里下载. ...
- 【原】Zookeeper 概述 + 官网 Overview 翻译
分布式应用 分布式应用 distributed application可以在给定时间(同时)在网络中的多个系统上运行,通过协调它们以快速有效的方式完成特定任务. (a), (b): a distrib ...
- jdk环境变量一键设置 管理員运行
退出360等杀毒软件 本机win10 其他环境自测.参考了网上代码修改. @echo off rem dss color 02 mode con cols=70 lines=30 title JDK ...
- PHP屏蔽关键字实现方法
方法一: 思路 用正则去匹配关键字,把关键字用别的字符替换: 1 2 3 $str = "/你大爷|你麻痹|什么玩意|SB|你他妈/"; // 关键字正则字符串 $string ...
- ArcGIS JS API实现的距离测量与面积量算
转自https://www.cnblogs.com/deliciousExtra/p/5490937.html