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 相关文章推荐
js静态方法与实例方法分析
Jul 04 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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
php在线打包程序源码
2008/07/27 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
php实现递归的三种基本方式
2020/07/04 PHP
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
简单谈谈JS中的正则表达式
2017/09/11 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
如何进行Linux分区优化
2013/02/12 面试题
师范应届生求职信
2013/11/15 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
农业开发项目建议书
2014/05/16 职场文书
运动会演讲稿300字
2014/08/25 职场文书
审计班子对照检查材料
2014/08/27 职场文书
慰问信格式
2015/02/14 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
Oracle中DBLink的详细介绍
2022/04/29 Oracle