基本的window.document操作及实例

找元素

1.根据id找

var d1 = document.getElementById("d1");

alert(d1);

2.根据class找

var d2 = document.getElementsByClassName("d");

alert(d2[1]);

3.根据标签名找

var d3 = document.getElementsByTagName("div");

alert(d3[0]);

4.根据name找

var d4 = document.getElementsByName("aa");

alert(d4[0]);

操作元素

操作内容

非表单元素

var d1 = document.getElementById("d1");

1.获取文本

alert(d1.innerText);

2.设置文本

d1.innerText = "hello";

3.获取html代码

alert(d1.innerHTML);

4.设置html代码

d1.innerHTML = "<b>加粗文字</b>";

表单元素

var b1 = document.getElementById("b1");

1.赋值

b1.value = "ceshi";

2.获取值

alert(b1.value);

操作属性

1.添加属性

var d1 = document.getElementById("d1");

d1.setAttribute("bs","1");

2.获取属性

alert(d1.getAttribute("cs"));

3.移除属性

d1.removeAttribute("cs");

操作样式

function showa()

{

1.获取样式,只能获取内联样式

var d3 = document.getElementById("d3");

alert(d3.style.color);

}

function set()

{

var d3 = document.getElementById("d3");

2.设置样式

d3.style.backgroundColor = "red";

}

注册按钮选中可使用:

<input type="checkbox" id="ck" onclick="xiugai()" />同意

<input type="button" value="注册" id="btn" disabled="disabled" />

JS程序:

function xiugai()

{

//找到复选框

var ck = document.getElementById("ck");

//找到按钮

var btn = document.getElementById("btn");

//判断复选框的选中状态

if(ck.checked)

{

//移除按钮的不可用属性

btn.removeAttribute("disabled");

}

else

{

//设置不可用属性

btn.setAttribute("disabled","disabled");

}

}

鼠标选中背景文字颜色改变:

Css样式:<style type="text/css">

#caidan{

width:500px; height:35px; border:1px solid #60F;

}

.xiang{

width:100px;

height:35px;

text-align:center;

line-height:35px;

vertical-align:middle;

float:left;

}

</style>

Body程序:

<div id="caidan">

<div class="xiang" onmouseover="huan(this)" >首页</div>

<div class="xiang" onmouseover="huan(this)" >产品中心</div>

<div class="xiang" onmouseover="huan(this)" >服务中心</div>

<div class="xiang" onmouseover="huan(this)" >联系我们</div>

</div>

JS程序:

function huan(a)

{

//将所有的项恢复原样式

var d = document.getElementsByClassName("xiang");

for(var i=0;i<d.length;i++)

{

d[i].style.backgroundColor="white";

d[i].style.color = "black";

}

//换该元素的样式

a.style.backgroundColor = "red";

a.style.color = "white";

}

倒计时结束按钮可点击:

<span id="daojishi">10</span>

<input disabled="disabled" type="button" value="注册" id="anniu" />

</div>

JS程序:

<script type="text/javascript">

window.setTimeout("daojishi()",1000);

//功能:倒计时减1

function daojishi()

{

//找到span

var s = document.getElementById("daojishi");

//判断

if(parseInt(s.innerHTML)<=0)

{

document.getElementById("anniu").removeAttribute("disabled");

}

else

{

//获取内容,减1之后再交给span

s.innerHTML = parseInt(s.innerHTML)-1;

//每隔一秒调一次该方法

window.setTimeout("daojishi()",1000);

}

}

</script>

基本的window.document操作及实例的更多相关文章

  1. JavaScript的DOM操作。Window.document对象

    间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 :      window.setlnteval("alert("你 ...

  2. DOM操作(Window.document对象)

    间隔与延迟: 间隔一段代码: window.setInterval("代码",间隔执行秒数) 延迟一段时间后执行一段代码: window.setTimeout("执行代码 ...

  3. Selenium2学习-040-JavaScript弹出框(alert、confirm、prompt)操作演示实例

    弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...

  4. js 浏览器窗口大小改变 高度 宽度获取 window/document.height()区别

    <script> //当浏览器的窗口大小被改变时触发的事件window.onresize window.onresize = function(){ console.log($(windo ...

  5. Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

  6. window.onload和window.document.readystate的探究

    在编写前端页面的时候,我们时常需要对页面加载的状态进行判断,以便进行相应的操作. 比如在移动端,时常需要在页面完全加载完成之前,先显示一个loading的图标,等待页面完成加载完成后,才显示出真正要展 ...

  7. DOM、Window对象操作

    一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 一.基本语法: 数据类型(字符串,小数,整数,布尔,时间) var, v ...

  8. Window.document对象 轮播练习

    Window.document对象 一.找到元素:     docunment.getElementById("id"):根据id找,最多找一个:     var a =docun ...

  9. HTML Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunmen ...

随机推荐

  1. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...

  2. Django调用JS、CSS、图片等静态文件

    zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...

  3. for变量作用域(vc6与vs)

    for变量:写在for循环初始语句中的变量.如:for (int i=1,j=2; i<100; i++) vc6的for变量 int i 的作用域: void func(bool condit ...

  4. Web测试的常用测试用例与知识

    1. Web测试中关于登录的测试 2. 搜索功能测试用例设计 3. 翻页功能测试用例 4. 输入框的测试 5. Web测试的常用的检查点 6. 用户及权限管理功能常规测试方法 7. Web测试之兼容性 ...

  5. 那些年,我们一起疯狂的C#

    v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...

  6. SQL Server数据库ROW_NUMBER()函数使用详解

    SQL Server数据库ROW_NUMBER()函数使用详解 摘自:http://database.51cto.com/art/201108/283399.htm SQL Server数据库ROW_ ...

  7. java定时框架:表达式设置

    Quartz中时间表达式的设置-----corn表达式 (注:这是让我看比较明白的一个博文,但是抱歉,没有找到原作者,如有侵犯,请告知) 时间格式: <!-- s m h d m w(?) y( ...

  8. Hadoop SPARK 环境搭建

    http://www.linuxidc.com/Linux/2015-02/113486.htm http://www.cnblogs.com/lijingchn/p/5574476.html htt ...

  9. Android中弹出对话框,AlertDialog关键代码

    写在这里便于以后查看. Android中弹出对话框的关键代码: btn01.setOnClickListener(new OnClickListener() { @Override public vo ...

  10. TOJ4114(活用树状数组)

    TOJ指天津大学onlinejudge 题意:给你由N个数组成的数列,算出它们的所有连续和的异或和,比如:数列{1,2},则answer = 1 ^ 2 ^ (1 + 2) = 0. 这道题有几个关键 ...