JS document内容及样式操作完整示例
本文实例讲述了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>
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
javascript下for( in )语句 获得所有style 的【scrollbar】滚动条样式内容
events=[];for(o in O=obj.currentStyle)events.push(o+'='+O[o]) 这里输入代码内容 0 events=[''];for(o in O=obj.currentStyle)if(/^scrollbar/.test(o))events.push(o+'='+O[o]) obj.innerHTML=' '+events.sort().join(' ')+' ' [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）
http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识.因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力! 1.DOM的架构 复制代码 代码如下: <html> <head> <title>document</title> </head> <body> <h1>CSS Demo<
-
javascript dom追加内容实现示例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
JavaScript中使用document.write向页面输出内容实例
document.write 命令向页面输出文字 本实例使用 JavaScript 的 document.write 命令向页面输出指定的文字,代码如下: 复制代码 代码如下: <script type="text/javascript"> document.write("我是向页面输出的文字!"); </script> 将上面部分代码,用文本编辑器保存为 write.html(或 write.htm).双击 write.html 运行它(实
-
点击button获取text内容并改变样式的js实现
需求:点击button获得input框中选中的内容,让选中的内容变红, 实现:代码如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Test</title> <style type="text/css">
-
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
JavaScript 输出 JavaScript 没有任何打印或者输出的函数. JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据: 使用 window.alert() 弹出警告框. 使用 document.write() 方法将内容写到 HTML 文档中. 使用 innerHTML 写入到 HTML 元素. 使用 console.log() 写入到浏览器的控制台. 使用 window.alert() 你可以弹出警告框来显示数据: <!DOCTYPE html>
-
JavaScript DOM操作表格及样式
一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe
-
js ondocumentready onmouseover onclick onmouseout 样式
复制代码 代码如下: <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="doInit()" /> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doMouseover()" /> <PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()&q
-
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
本文实例讲述了JavaScript基于Dom操作实现查找.修改HTML元素的内容及属性的方法.分享给大家供大家参考,具体如下: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML.例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C
-
JS document内容及样式操作完整示例
本文实例讲述了JS document内容及样式操作.分享给大家供大家参考,具体如下: <html> <head> <title>js-documnet元素内容和样式操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 单标签属性操作 // 固定属性的操作 function testOper1(){ // 获取对
-
js 实现div拖拽拉伸完整示例
目录 前言 HTML CSS JS 前言 今天和大家分享一下.如何用js实现div拖拽拉伸等功能.功能比较简单,我就不赘述了.直接上代码. HTML <div class="resize" data-key="drag"> <img src="../images/liya.jpg" alt=""> <div class="line line-n" data-key="
-
JS document文档的简单操作完整示例
本文实例讲述了JS document文档的简单操作.分享给大家供大家参考,具体如下: <html> <head> <title>js-documnent文档结构操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testFile(){ // 获取元素 var showdiv=document.ge
-
JS document form表单元素操作完整示例
本文实例讲述了JS document form表单元素操作.分享给大家供大家参考,具体如下: <html> <head> <title>form表单操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testForm(){ // 获取form对象 方法一,通过id,比较普遍的方法 var fm=d
-
JS实现的JSON序列化操作简单示例
本文实例讲述了JS实现的JSON序列化操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JOSN对象</title> <script> var book={ title:"php 最佳实践", authors:['jack'], edi
-
JS表格的动态操作完整示例
本文实例讲述了JS表格的动态操作.分享给大家供大家参考,具体如下: <html> <head> <title>js-表格的动态操作</title> <meta charset="UTF-8"/> <style type="text/css"> #ta tr{ height: 20px; } #t1{ font-weight: bold; /*align-content: center;*/ /*
-
JS window对象简单操作完整示例
本文实例讲述了JS window对象简单操作.分享给大家供大家参考,具体如下: 例1: <html> <head> <title>js---window函数</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 显示框:没有返回值,出现一个提示框 var sto; var stl; function testAler
-
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
本文实例讲述了JS实现的定时器展示简单秒表.页面弹框及跳转操作.分享给大家供大家参考,具体如下: 定时器展示简单秒表demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
-
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
本文实例讲述了js常用方法.检查是否有特殊字符串.倒序截取字符串操作.分享给大家供大家参考,具体如下: js常用方法demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
-
JS 遍历 json 和 JQuery 遍历json操作完整示例
本文实例讲述了JS 遍历 json 和 JQuery 遍历json操作.分享给大家供大家参考,具体如下: json 遍历 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>demo data</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j