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

来源:脚本之家  责任编辑:小易  

document.write()好处是他可以动态的输出,或者说你想让他输出的时候他在输出,比如我想点击某个按钮的时候输出,那document.write()就派上用了,你把它写到onclick事件里,直接用html就做不到这点www.zgxue.com防采集请勿采集本网。

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

Document对象内容集合 document 文挡对象-JavaScript脚本语言描述 注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写 否则会提示你一个错误信息“引用的元素为空或者不是对象\\\\\\\\\\

<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>

<div name=\"div1\"></div> document.getElementsByName('div1');document.getElementsByTagName('div');顾名思义,根据name属性,根据标签名字

运行结果:

获得页面中选中信息,在html编辑器中常见, 如果我们要修改字体,可以先选中,然后修改之, JS就是通过getSelection()方法获得选中信息的。

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

你的代码没有问题,问题是你的运行环境并非浏览器环境而是nodejs环境。nodejs环境中并没有DOM对象。因此你可以考虑以下解决方案: 将js引入到html页面,并在浏览器环境中打开运行。在nodejs环境

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

alert写错啦 function check() { var id=document.getElementById('username').value;alert(id) } 第一个JSP实例1 input your name: input password: ()'/>

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

简单来说,document是window的一个对象属性。Window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。所有的全局函数和对象都属于Window 对象的属性和方法。document 对 Document 对象的只读引用。区别:1、window 指窗体。document指页面。document是window的一个子对象。2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location(用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript 输出显示内容(document.write、alert、innerhtml、console.log)
  • javascript中使用document.write向页面输出内容实例
  • js ondocumentready onmouseover onclick onmouseout 样式
  • 点击button获取text内容并改变样式的js实现
  • javascript下for( in )语句 获得所有style 的【scrollbar】滚动条样式内容
  • javascript基于dom操作实现查找、修改html元素的内容及属性的方法
  • javascript dom追加内容实现示例
  • javascript dom操作表格及样式
  • javascript 高级篇之dom文档,简单封装及调用、动态添加、删除样式(六)
  • javascript 一个函数对同一元素的多个事件响应
  • bootstrap框架安装使用详解
  • 微信小程序加载机制及运行机制图解
  • 页面版文本框智能提示js代码
  • js字符编码函数区别分析
  • js两种拼接字符串的简单方法(必看)
  • javascript 框架小结 个人工作经验
  • 根据表格中的某一列进行排序的javascript代码
  • 详解js获取video任意时间的画面截图
  • js中的this关键字详解
  • JS中document对象和window对象有什么区别么?
  • js中document.write()方法是向html页面写内容 ,但它与直接用html有什么区别?
  • 在js中document.getElementById(ID) document.getElementsByName(Name) 这两个有什么区别
  • HTML中如何用JS获得其他网页的DOCUMENT对象
  • js里面 document 什么意思
  • js中document.getelementsbyname和 getelementsbytagname的区别
  • JS中的document.getSelection()是干什么的
  • js里面的document怎么定义
  • js用document.getElementById获取文本框内容的问题
  • js中获取标签里面的值除了document.getEelementById()和document.getEelementsByName()之外还有那些方法?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript操作dom技巧总结javascript页面元素操作技巧总结javascript事件相关操作与技巧大全javascript查找算法技巧总结javascript数据结构与算法技巧总结javascript遍历算法与技巧总结javascript错误与调试技巧总结javascript 输出显示内容(document.write、alert、innerhtml、console.log)javascript中使用document.write向页面输出内容实例js ondocumentready onmouseover onclick onmouseout 样式点击button获取text内容并改变样式的js实现javascript下for( in )语句 获得所有style 的【scrollbar】滚动条样式内容javascript基于dom操作实现查找、修改html元素的内容及属性的方法javascript dom追加内容实现示例javascript dom操作表格及样式javascript 高级篇之dom文档,简单封装及调用、动态添加、删除样式(六)javascript 一个函数对同一元素的多个事件响应bootstrap框架安装使用详解微信小程序加载机制及运行机制图解页面版文本框智能提示js代码js字符编码函数区别分析js两种拼接字符串的简单方法(必看)javascript 框架小结 个人工作经验根据表格中的某一列进行排序的javascript代码详解js获取video任意时间的画面截图js中的this关键字详解js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的javascript深入理解js闭包js删除数组里的某个元素方法javascript实现相同事件名称,不同命名空日常收集整理的javascript常用函数方法浅析bootstrap表格的使用实用又漂亮的bootstrapvalidator表单验证webpack 代码分离优化快速指北js图片轮播与索引变色功能实例详解js简单的分页器插件代码实例关于js中的apply,call,bind的深入解析在javascript中实现函数数组的方法vs2003 js文件编码问题的解决方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved