通过 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. Cygwin windows10上安装出现系列问题及解决方法

    问题1描述: 发现vim不好使,Backspace键只是前移,不能删除,按方向键更是按出ABCD来.   解决方法: $ cp /usr/share/vim/vim73/vimrc_example.v ...

  2. ADO.NET主要组件

  3. BurpSuite—-Sequencer模块(定序器)

    一.简介 Burp Sequencer是一种用于分析数据项的一个样本中的随机性质量的工具.你可以用它来测试应用程序的session tokens(会话tokens)或其他重要数据项的本意是不可预测的, ...

  4. iis7+的虚拟目录：未能加载程序集“**”。请确保在访问该页之前已经编译了此程序集

    在使用win8系统后,突然想运行iis,于是在windows组件中启用iis,并aspnet_regiis.exe -i注册iis后,于是开始发布了一个站点,一切正常 继而,在该站点下添加虚拟目录,然 ...

  5. Python函数定义及传参方式

    主要内容:     1.函数初识     2.函数传参方式        (1)位置参数        (2)默认参数        (3)关键参数        (4)非固定传参 一.函数初识 1. ...

  6. day18-事务与连接池 1.复习

    实际开发中事务必须得用.

  7. codeforce 459 DIV2 D题

    题意   在一个DAG上面有N个点M条边,每一条边上都有一个小写字母.两个人Max and Lucas 每个人一颗棋子,两个人轮流行棋,当前这一步选择的路上面的字母必须大于等于上一步路上面的字母,当轮 ...

  8. Log4php使用指南

      一.Log4php简介 Log4php是Log4xx系列日志组件之一,是Log4j迁移到php的版本,主要用来记录日志信息,支持多种输入目的地,包括:日志文件.日志回滚文件.数据库.日志服务器等等 ...

  9. blockchain notes

    1. IBM blockchain platform https://www.ibm.com/blockchain/platform/ 2. 开源项目hyperledger https://hyper ...

  10. Luogu 3237 [HNOI2014]米特运输

    BZOJ 3573 发现当一个点的权值确定了,整棵树的权值也会随之确定,这个确定关系表现在根结点的总权值上,如果一个点$x$的权值为$v$,那么一步步向上跳后,到根节点的权值就会变成$x*$每一个点的 ...