通过 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 的文本内容或者样式的更多相关文章

  1. js即时监听文本内容

    <script type="text/javascript"> //其他浏览器 function OnInput (event) { alert ("文本内容 ...

  2. JS双击div编辑文本内容

    HTML代码: <div class="album"> <div class="image"><a href="java ...

  3. kindeditor编辑器修改文本后保存时发现获取到的内容还是修改前的文本内容

    定义kindeditor的时候要加上一下几个属性设置: KindEditor.ready(function(K) { var editor = K.create("textarea[name ...

  4. js 修改字符串中某些字符的样式

    var str = 'abcdefghijklmnobqrstuvwxyz'; function HightLight(e){ var reg = new RegExp(e, 'g') str = s ...

  5. JS中通过id或者class获取文本内容

    一.JS通过id获取文本内容 二.JS通过class获取文本内容

  6. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  7. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  8. JS修改标签中的文本且不影响其中标签

    /********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * ...

  9. Cleave.js – 自动格式化表单输入框的文本内容

    Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...

随机推荐

  1. oracle中，约束、表名、Index等的名称长度限制最大只能30个字符

    oracle中,约束.表名.Index等的名称长度限制最大只能30个字符

  2. HTTP之报文

    HTTP 报文 用于 HTTP 协议交互的信息被称为 HTTP 报文.请求端(客户端)的 HTTP 报文叫做请求报文,响应端(服务器端)的叫做响应报文.HTTP 报文本身是由多行(用 CR+LF 作换 ...

  3. 3.使用Maven构建Web项目

    转自:https://blog.csdn.net/m261030956/article/details/46481837 从网上查了一些资料,才算明白(也就是怎么操作吧),怎么使用Maven构建一个W ...

  4. RAD 10 新控件 TSearchBox TSplitView

    Seattle新控件 1.TSearchBox Events OnInvokeSearch published Occurs when the search indicator button is c ...

  5. java将类和函数封装成jar

    本来想用idea安装的,不过用maven生成后发现jar有20,30M肯定不对,后来还是用eclipse生成了,方便很多 环境: eclipse luna,jdk1.8_112 1.生成jar包,首先 ...

  6. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 4_Linear Regression with Multiple Variables 多变量线性回归

    Lecture 4 Linear Regression with Multiple Variables 多变量线性回归 4.1 多维特征 Multiple Features4.2 多变量梯度下降 Gr ...

  7. Idea搭建Scala开发环境的注意事项

    Idea搭建Scala开发环境的注意事项 1.下载ideaIC-2017.3.tar.gz 2.解压安装idea 3.File->setting->plugins 下载2个插件scala. ...

  8. 读书笔记 Week5 2018-4-5

    再结束了第一个个人任务以后,我也算有点时间翻开一本大部头来通读一下.在看了一些相关的评论说:“该书可以从任意章节读起”后,刚刚在180M测试文件的个人任务中吃了亏的我,决定从他的第5部分,代码改善看起 ...

  9. Javamail简单使用案例

    邮件开发环境搭建 邮件服务器 易邮邮件服务器 配置如下 邮件客户端 Foxmail 配置如下 使用Javamail发送邮件 下载 javamail-samples.zip javax.mail.jar ...

  10. 1 JPA入门----项目搭建以及CRUD

    maven搭建JPA开发环境 1 依赖的maven pom文件     主要有hibernate-core.hibernate-entitymanager.javax-persistence.mysq ...