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 相关文章推荐
javascript window.opener的用法分析
Apr 07 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
JQuery基础语法小结
Feb 27 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
PHP实现简单日历类编写
2020/08/28 PHP
onpropertypchange
2006/07/01 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
详解vue中组件参数
2018/07/09 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
Python splitlines使用技巧
2008/09/06 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python如何定义有可选参数的元类
2020/07/31 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
C#和SQL Server的面试题
2016/08/12 面试题
人事主管岗位职责范本
2013/12/04 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
社区母亲节活动记录
2014/03/06 职场文书
单位工资证明范本
2015/06/12 职场文书
详细介绍python类及类的用法
2021/05/31 Python
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis