通过 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. minerd.exe 处理

    :top TASKKILL /F /IM "minerd.exe" Goto top and then searching the file system for minerd.e ...

  2. Spring使用标签注解来简化xml书写

    一.步骤 在配置文件中,引入context命名空间 <beans xmlns="http://www.springframework.org/schema/beans" xm ...

  3. Navigator - BOM对象

    Navigator 对象 Navigator 对象包含有关浏览器的信息. 注释:没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象. Navigator 对象集合 集合 描述 ...

  4. SSH隧道技术简介

    本文的受众如果你遇到了以下问题,那么你应该阅读这篇文章 我听说过这种技术,我对它很感兴趣 我想在家里访问我在公司的机器(写程序,查数据,下电影). 公司为了防止我们用XX软件封锁了它的端口或者服务器地 ...

  5. c++ deque 容器

    deque (全名 double ended queue)是一种具有队列和栈一样的数据结构. 在c++标准库中几乎和vector容器的接口完全相同,但它和vector 还是有一些细微的差别. 1. d ...

  6. Java-Http

    1 import java.io.BufferedReader; 2 import java.io.BufferedWriter; 3 import java.io.IOException; 4 im ...

  7. 面试题:try，catch，finally都有return语句时执行哪个 已看1

    1.不管有木有出现异常,finally块中代码都会执行: return 先执行 把值临时存储起来, 执行完finally之后再取出来 值是不会改变的2.当try和catch中有return时,fina ...

  8. ROS编译:catkin简析

    博客转载自:https://blog.csdn.net/zyh821351004/article/details/50388429 Catkin tutorials: http://wiki.ros. ...

  9. ROS naviagtion analysis: costmap_2d--Costmap2DROS

    博客转载自:https://blog.csdn.net/u013158492/article/details/50485418 在上一篇文章中moveBase就有关于costmap_2d的使用: pl ...

  10. 16.数据类型（data_type）

    CREATE TABLE 语句 CREATE TABLE 语句用于创建数据库中的表. SQL CREATE TABLE 语法 CREATE TABLE 表名称 ( 列名称1 数据类型, 列名称2 数据 ...