通过 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. MongoDB在Windows下的环境配置和使用

    总是觉得配置环境是一个超级麻烦的事情啊,而且网上说的又比较乱,配置完后又没有说怎么开始运行,在哪输入增删改查语句,像突然断层一样.所以就在这里详细说说. 一:下载安装 1.去官网的下载页面 2.下载完 ...

  2. 浅谈PL/SQL语言基础

    在前面的学习中,我们大部分接触的都是SQL语言,但是,在实现复杂操作的时候,SQL语言就无能为力了,这时候就需要引入新的语言,PL/SQL语言就是对SQL语言的扩展,可以实现存储过程,函数等的创建.下 ...

  3. 【原】Coursera—Andrew Ng机器学习—编程作业 Programming Exercise 2——逻辑回归

    作业说明 Exercise 2,Week 3,使用Octave实现逻辑回归模型.数据集  ex2data1.txt ,ex2data2.txt 实现 Sigmoid .代价函数计算Computing ...

  4. resin3.X那些事之resin.conf

    [经验总结]resin那些事之resin.conf ----by johnson 话说与resin打交道很久了,却从未系统了解过.resin一听火了,说:你老兄当真与我打交道很久了?工具.流程如此发达 ...

  5. 主机不能访问虚拟机中的web服务【解决方案】

    百度了其它一些方法都不行,最后实在没辙,关了windows防火墙和Linux防火墙,居然能够访问了,我服. 总结一下,原来是Red Hat Linux 6.0防火墙没有开启端口80,开启的方法为(老版 ...

  6. 170318 11:44:26 [ERROR] Can't start server: can't create PID file: No space left on device

    数据库挂了.打开远程,进了系统,service mysqld stop 失败.service mysqld start等了好大一会,提示Timeout error occurred trying to ...

  7. map两种插入方法解析（insert() 与 下标[]操作）

    insert 含义是: 如果key存在,则插入失败,如果key不存在,就创建这个key-value. 实例: map.insert((key, value)) 利用下标操作的含义是: 如果这个key存 ...

  8. 刷题向》图论》BZOJ1001 平面图最大流、平面图最小割、单源最短路(easy+)

    坦白的说这是一道水题,但是因为是BZOJ上的1001,所以这道题有着特殊的意义. 关于最大流转最短路的博客链接如下:关于最大流转最短路两三事 这道题的图形很规矩,所以建边和建点还是很简单的. 题目如下 ...

  9. Content 控件

    转自:http://www.cnblogs.com/superfang/archive/2008/06/29/1232158.html 创建一个服务器控件,该控件包含呈现到母版页中的 ContentP ...

  10. javascript实现新浪微博MID与地址转换

    新浪微博每一条微博都会有一个mid,然后每条微博都有一个独立的地址,例如:http://www.weibo.com//Bw3SXzWzP 规律:地址中的黄色部分是用户id,绿色部分是微博的识别字符串, ...