JS document内容及样式操作完整示例


Posted in Javascript onJanuary 14, 2020

本文实例讲述了JS document内容及样式操作。分享给大家供大家参考,具体如下:

<html>
    <head>
        <title>js-documnet元素内容和样式操作</title>
        <meta charset="UTF-8"/>
        
        <script type="text/javascript">
//            单标签属性操作
//            固定属性的操作
            function testOper1(){
//                获取对象
                var inp=document.getElementById("uname");
                alert(inp.type+"::"+inp.name+"::"+inp.id+"::"+inp.value);    //可以直接用.直接获取其内部属性
                alert(tt);   //不会报错,其会显示undefined
            }
            function testChange(){
//                获取对象
                var inp=document.getElementById("uname");
                inp.type="button"   //对获取的对象属性值进行修改
                inp.value="古河渚";
                alert(inp.value);   //输出当前数据的value值,当没用上面的重新赋值,会输出用户输入的值,用户也可以直接改变文本value值
            }
            function testAdd(){
//                获取对象
                var inp=document.getElementById("uname");  
                inp.class="Animation";  //在获取的对象添加属性
                alert(inp.class);
            }
            function testClear(){
//                获取对象
                var inp=document.getElementById("uname");
                inp.value="";  //把获取的对象属性清空
                alert(inp.value);
            }
//            自定义属性的操作
      function testextra(){
//         获取对象
                var inp=document.getElementById("uname");
                alert(inp.getAttribute("Animation"));
      }
      function testextra2(){
//         获取对象
                var inp=document.getElementById("uname"); 
                inp.setAttribute("Animation","clannad after story");   //把指定的元素属性进行修改
                alert(inp.getAttribute("Animation"));       //属性值变了,属性哦ing名没有变
      }
       function testextra3(){
//         获取对象
                var inp=document.getElementById("uname");   //我们一般不会修改对象name值因为这是键值会与后台进行链接,也一般不改变id,因为我们一般用id来进行对象的获取
                alert(inp.getAttribute("value"));     //输出的是空,因为没有给value赋值,即使用户端输入也不行,用户端不能在这种方式下改变标签的固定属性值
                inp.setAttribute("value","CLANNAD");
                alert(inp.getAttribute("value"));     //和以上的操作一个效果
      }
       
//     双标签内部属性测试
//            对于那些用两个标签确定的,我们可以操作其内部的内容
//             双标签的内容操作
            function testOper2(){
//                获取对象
                var div01=document.getElementById("div01");
                alert(div01.innerHTML);      //innerHTML获取对象中的所有内容,包括其对象的标签
                alert(div01.innerText);       //innerText获取对象的文本内容
            }
            function tsetChangeCssText(){
                var div01=document.getElementById("div01");
                div01.innerText="clannad 世界第一"         //单纯的打印全部的文本内容
                alert(div01.innerText); 
                div01.innerText=div01.innerText+"そうです";        //进行文档的拼接 
                alert(div01.innerText);
            }
            function tsetChangeCssText(){
                var div01=document.getElementById("div01");
                div01.innerHTML="<b>clannad 世界第一</b>"  //HTML是类型的数据可以在显示的时候进行执行
                alert(div01.innerText);
                div01.innerHTML=div01.innerHTML+"<b>そうです</b>";     //进行HTML数据的拼接
                alert(div01.innerText);
            }
//            双标签的样式操作
//            属性直接操作样式
            function testCssOper(){
                var div02=document.getElementById("div02");
                div02.style.backgroundColor="red";  //添加对象的背景颜色
                div02.style.border="solid 3px purple";  //修改对象的边框属性
                div02.style.backgroundColor=""     //清空对象的背景颜色
            }
//            className方式操作样式
            function testCssOper2(){
                var div02=document.getElementById("div02");
                alert(div02.className);  //获取
                div02.className="common2";  //修改
//                div02.className="";    //清空
            }
        </script>
        <style type="text/css">
            #div01{
                width: 200px;
                height: 200px;
                border: solid 2px yellow;
            }
            #div02{
                width: 200px;
                height: 200px;
                border: solid 2px cyan;
            }
            .common{
                width: 200px;
                height: 200px;
                border: solid 2px cyan;
            }
            .common2{
                width: 200px;
                height: 200px;
                border: solid 2px purple;
            }
        </style>
    </head>
    <body>
        <h3>js-documnet元素内容和样式操作</h3>
        <h4>单标签操作</h4>
        <input type="button" name="" id="" value="测试单标签操作" onclick="testOper1()" />
        <input type="button" name="" id="" value="测试单标签修改操作" onclick="testChange()" />
        <input type="button" name="" id="" value="测试单标签添加操作" onclick="testAdd()" />
        <input type="button" name="" id="" value="测试单标签清空操作" onclick="testClear()" />
        <input type="button" name="" id="" value="测试单标签自定义属性操作" onclick="testextra2()" />
        <input type="button" name="" id="" value="测试单标签自定义方法对固定属性操作" onclick="testextra3()" />
        <hr />
        单标签测试 <br /><br />
        <input type="text" name="uname" id="uname" value="" Animation="clannad" />
        <hr />
        双标签测试<br /><br />
        <input type="button" name="" id="" value="测试双标签内容操作" onclick="testOper2()" />
        <input type="button" name="" id="" value="测试双标签内容修改和添加操作" onclick="tsetChangeCssText()" />
        <input type="button" name="" id="" value="测试双标签样式一系列操作" onclick="testCssOper()" />
        <input type="button" name="" id="" value="测试双标签样式一系列操作--className" onclick="testCssOper2()" />
        <hr /><br />
        <div id="div01">
            <b>clannad 赛高!</b>
        </div>
        <div id="div02" class="common">
        </div>
    </body>
</html>

运行结果:

JS document内容及样式操作完整示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
浅析javascript中的DOM
Mar 01 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 #Javascript
小程序中设置缓存过期的实现方法
Jan 14 #Javascript
ES6实现图片切换特效代码
Jan 14 #Javascript
vue项目创建步骤及路由router
Jan 14 #Javascript
JS实现容器模块左右拖动效果
Jan 14 #Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 #Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 #Javascript
You might like
论建造顺序的重要性
2020/03/04 星际争霸
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
js实现图片360度旋转
2017/01/22 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
详解Python学习之安装pandas
2019/04/16 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
管理站站长岗位职责
2013/11/27 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
副厂长岗位职责
2014/02/02 职场文书
工作决心书范文
2014/03/11 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
临床医学专业求职信
2014/08/08 职场文书
关于保护环境的建议书
2014/08/26 职场文书
家庭教育的心得体会
2014/09/01 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
庆元旦主持词
2015/07/06 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python