通过 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. CVE-2017-8464(震网三代)复现

    开启msf root@sch01ar:~# msfconsole 设置模块 msf > use exploit/windows/fileformat/cve_2017_8464_lnk_rce ...

  2. PHP字符串的处理(二)-字符串的格式化

    1.字符串大小写的转换 strtoupper():将字符串全部转换为大写字母 strtolower():将字符串全部转换为小写字母 ucfirst():将字符串中的首字母转换为大写,其余字符不变 uc ...

  3. JAVA简单的文件I/O操作实例

    如果只是对文件进行普通的读写,可以不用文件流. 以下是实例: File file = new File("test1.txt"); //向文件写入数据的 PrintWriter p ...

  4. quarz入门案例

    介绍 Quartz框架是一个全功能.开源的任务调度服务,可以集成几乎任何的java应用程序—从小的单片机系统到大型的电子商务系统.Quartz可以执行上千上万的任务调度.   核心概念  Quartz ...

  5. JS播放声音 兼容所有浏览器

    JS播放声音 兼容所有浏览器 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http ...

  6. Delphi 解压缩 ZipForge

    ZipForge http://www.componentace.com/zip_component_zip_delphi_zipforge.htm downLoad http://www.compo ...

  7. 【289】◀▶ Python I/O & 读写文本文件

    参考:Python 文件 I/O 参考:Python OS 文件/目录方法 目录: 01   open 函数 用于打开一个文件,创建一个 file 对象,相关的方法才可以调用它进行读写. 02   F ...

  8. ASP.NET MVC 和 WebForm的权限控制

    今天主要讲一下对于ASP.NET的页面级权限控制 数据结构:用户表.角色表.权限表.角色权限派生表 为用户添加权限的数据配置后, 自定义类对MVC继承Controller 对其内置方法Initiali ...

  9. CentOS7 启动docker.service失败(code=exited, status=1/FAILURE)

    启动报错 Job for docker.service failed because the control process exited with error code. See "sys ...

  10. 面试题:SpringMVC的工作流程

    SpringMVC是当今最主流的Web MVC框架,没有之一,要做一名合格的JavaWeb工程师,学好它势在必行! 与Struts2原理不同,SpringMVC是通过最基础最传统的servlet来实现 ...