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 相关文章推荐
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
JS数据类型分类及常用判断方法
Nov 19 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 图片上传实现代码 带详细注释
2010/04/29 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php实现头像上传预览功能
2017/04/27 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
ajax异步请求详解
2017/01/06 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
幼儿园国庆节活动方案
2014/02/01 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
自我查摆剖析材料
2014/10/11 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
MySQL中varchar和char类型的区别
2021/11/17 MySQL