使用JavaScript改变页面元素的属性

　　在使用HTML制作web页面的过程中，很多时候需要动态的去改变控件的属性，这就需要通过调用JavaScript脚本来实现。下面介绍了本人使用过的一些示例代码。

JavaScript脚本改变页面控件的HTML属性。

1.语法：

document.getElementById(id).attribute=new value

2.说明：

id　　　　　　控件的ID
attribute　　控件的HTML属性
new value　　新的属性值

3.示例代码：

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript改变控件HTML属性</title>
</head>
<body>

<p id="txt" align="center"><b>文字</b></p>
<script>
//    函数功能：改变控件的align属性值
//
//    参数： elem_id            控件的ID
//         alia_value            属性值
function txt_alig(elem_id,alig_value)
{
    document.getElementById(elem_id).align=alig_value;    //关键代码
}
</script>
<div align="center">
<input type="button" value="左边" onClick="txt_alig(‘txt‘,‘left‘)">
<input type="button" value="中间" onClick="txt_alig(‘txt‘,‘center‘)">
<input type="button" value="右边" onClick="txt_alig(‘txt‘,‘right‘)">
</div>
</body>
</html>

JavaScript脚本改变页面空间的CSS属性。

1.语法

document.getElementById(id).style.property=new style

2.说明

利用JavaScript改变控件CSS属性与改变HTML属性的区别在于属性的前面要加一个style。

id　　　　　　控件的ID
property　　 控件的CSS属性
new value　　新的属性值

3.示例代码

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>利用JavaScript改变控件的CSS属性</title>
</head>

<style type="text/css">
#color_box{ background-color:#0F0; width:100px; height:100px; margin-left:auto; margin-right:auto; margin-top:200px; }
</style>

<body>
<div id="color_box" align="center"></div>
<script language="javascript">
function change_color(colo)
{
    document.getElementById("color_box").style.backgroundColor=colo;
}
</script>
<div align="center">
<input type="button" value="红" onclick="change_color(‘#FF0000‘)" />
<input type="button" value="绿" onclick="change_color(‘#00FF00‘)" />
<input type="button" value="蓝" onclick="change_color(‘#0000FF‘)" />
</div>

</body>
</html>

时间： 2024-11-03 21:24:05

使用JavaScript改变页面元素的属性的相关文章

[转载]用Javascript获取页面元素的位置

原文地址:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html 制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那

javascript操作html元素CSS属性

下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

用javaScript获取页面元素值

用JavaScript获取页面元素常见的三种方法: getElementById() getElementsByName() getElementsBy

JavaScript 实现页面元素（ul-li）的简单排序

JavaScript 实现页面元素(ul-li)的简单排序 html页面: <input type="button" value="show" onclick="show()" /> <ul id="ul1"> <li>4</li> <li>3</li> <li>2</li> <li>1</li> </

jsp页面使用javascript添加页面元素示例代码

<body> <input type="button" value="test" onclick="javascript:a();"> <table id="tab"> <tr> <td>1</td> <td><input name="11" type="text

使用JavaScript操作页面元素

在webdriver脚本代码中执行JavaScript代码,来实现对页面元素的操作.此种方式主要用于解决在某些情况下,页面元素的.click()方法无法生效等问题. #!usr/bin/env python #-*- coding:utf-8 -*- """ @author: sleeping_cat @Contact : [email protected] """ #使用JavaScript操作页面元素 from selenium import

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口). 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的.如果不能全部显示,

使用JavascriptExecutor改变页面元素

如下如html的页面代码 <html> <body> <input type="text" name="text" value="alone"> </body> </html> 使用下列脚本即可改变标签的属性 public class Selenium { public static WebDriver jsDriver; @BeforeMethod public void intiDr

webdriver高级应用-使用JavaScript操作页面元素

Webdriver搞不定的,需要用js,无需引入有关js的包就可用在WebDriver脚本代码中执行JavaScript代码,来实现对页面元素的操作.此方法主要用于解决在某些情况下,页面元素的.click()方法无法生效等问题. #encoding=utf-8 from selenium import webdriver from selenium.common.exceptions import WebDriverException import unittest import traceb