通过 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是这样判断值的数据类型的
js如何判定给定值的数据类型? typeof typeof "a" // "string" typeof 1 // "number" typ ...
- mongodb基本操作和在springboot中的使用
本文介绍mongodb的使用 说明 起步 mongo通用类型 mongoshell的操作 CRUD操作 shell命令操作 索引操作 mongo在springboot中的使用 目录结构 依赖 prop ...
- 基于JNI，JAVA 调用 C++入门
1.步骤一览 2.步骤详情 2.1. 编写Java类 native package com.ibugs.jni; /** * * @author i_bugs * */ public class CP ...
- SqlConnection 无法设置连接超时
1.最有效的方法:对表格建立索引 2 在连接字符串中设置 Connection Timeout (默认15秒)3 设置 SqlCommand.CommandTimeout(默认是 30 秒)
- 判断修改的中的值，用前面的，否则容易获得空值；this.dataGridView1.Rows[i].Cells[0].EditedFormattedValue; VS bool b = (bool)this.dataGridView1.Rows[i].Cells[0].Value;
判断修改的中的值,用前面的,否则容易获得空值:this.dataGridView1.Rows[i].Cells[0].EditedFormattedValue; VS bool b = (b ...
- 粗粒度（Coarse-grained）vs细粒度（fine-grained）
在读的一篇文献中关于RDF的描述: As we know, RDF data is a set of triples with the form (subject, property, object) ...
- Catalan数计算及应用
Catalan数列是非常奇妙的一列数字,因为很多问题的解就是一个Catalan数.知道了这一规律,很多看似复杂的问题便可迎刃而解.那么什么是Catalan数,什么样的问题的解是Catalan数呢? 1 ...
- 无锁的同步策略——CAS操作详解
目录 1. 从乐观锁和悲观锁谈起 2. CAS详解 2.1 CAS指令 2.3 Java中的CAS指令 2.4 CAS结合失败重试机制进行并发控制 3. CAS操作的优势和劣势 3.1 CAS相比独占 ...
- 10-编译PHP并与nginx整合
nginx的URL重写.nginx+PHP的配置也是不可不学的部分.PHP自己手动编译,mysql就自己yum了. yum install 安装mysql 同时进行php的编译,手动编译php 这么多 ...
- Chrome，firefox，ie等浏览器空格 宽度不一样
方案一:使用其他字符代替空格 使用( :)空格浏览器之间,显示的不一样,对不齐等现象. 解决方案: 用半角空格&ensp:或者全角空格&emsp:就可以了,&e ...