`

javascript GetElementById的属性和对元素属性的设置

 
阅读更多

 顾明思义,get-Element-By-Id,就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签,条件很简单就是给每个标签分配一个ID号

 

一getElementById的使用:

 

document.getElementById("link").href; 
document.getElementById("link").target; 
document.getElementById("img").src; 
document.getElementById("img").width; 
document.getElementById("img").height; 
document.getElementById("input").value; 

 


那么如何取得

 

<div></div>

以及

<a></a>

之间的值呢?

 

如<div id="div">aaa</div>中的aaa,<a href="#" id="link">bbb</a>中的bbb,也很简单,利用innerHTML就可以,

document.getElementById("div").innerHTML; 
document.getElementById("link").innerHTML; 

 

 

二:javascript设置元素的属性:

 

可以通过JavaScript使用元素的setAttribute方法设置元素的样式,例如: 要把Span元素中的文本修改为采用红色粗体显示,设置如下:

var spanElement = document.getElementById("mySpan");

spanElement.setAttribute("style","font-weight:bold;color:red;");

除了IE,这种方法在当前其他浏览器上都是行得通的. 对于IE,解决方法是使用元素style对象的cssText属性来设置所需的样式, 尽管这个属性不标准,但得到了广泛的支持,如下所示:

 

var spanElement = document.getElementById("mySpan");

spanElement.style.cssText = "font-weight:bold;color:red;";


 

这种方法在IE和大多数其他浏览器上都能很好地工作,只有Opera除外, 为了让代码能在所有当前浏览器上都可以移值,可以同时使用这两种方法,如下所示:

var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style","font-weight:bold;color:red;");
spanElement.style.cssText = "font-weight:bold;color:red;";

 

分享到:
评论

相关推荐

    javaScript 读取和设置文档元素的样式属性

    外部链接样式表文件 JavaScript获取和设置文档元素的css属性: 1.获取元素Style属性里面设置的样式属性, document.getElementById(id).style.height; 有,则返回属性值;没有则返回空 IE和火狐皆然,只是有的属性值...

    Javascript获取标签ID改变style属性的代码

    实例JavaScript代码 下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了。 代码如下: [removed] var d = document....

    用javascript添加控件自定义属性解析

    如想增加idvalue属性(值为”自定义值”),可以在javascript中这样写: 代码如下:var txt = document.getElementById(“txtInput”);txt.setAttribute(“idvalue”,”自定义值”);setAttribute中第一个参数是指明...

    javascript函数的解释

    5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase...

    javascript操作元素的常见方法小结

    可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如: [removed] var oDiv = document.getElementById('div1'); [removed] ....

    客户端统一验证JavaScript函数库及示例源码

    验证控件须对每个控件的元素进行设置且会对页面整体的布局带来影响,占据着页面布局空间的位置,综合考虑及项目整体风格的统一等多种因素中,总得有个折中的考虑。ChkInputs.js应运而生,使用它不需要编写多少代码,...

    JavaScript驾驭网页-获取网页元素

    推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM ...利用JavaScript控制网页内容其实很像烹饪。只是不用收拾列羹剩肴,但也没有办法享受美味的...可以通过id属性来获取元素 &lt;body&gt; &lt;div id="d

    JavaScript基本的输出和嵌入式写法教程

    如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。 请使用 “id” 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容: 实例 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;...

    【JavaScript源代码】JavaScript style对象与CurrentStyle对象案例详解.docx

    style对象获取的是内联样式,即元素标签中style属性的值。 例子: &lt;style type="text/css"&gt;#div{color:gray;}&lt;/div&gt;//内部样式 ;"&gt;&lt;/div&gt;//内联样式 document.getElementById('id').style.color;//值为red 2、...

    精通javascript

    • 11.9.htm 元素属性综合应用 • 11.10.htm 动态修改表单元素内容 第12章(\第12章) • 12.1.htm Document树的简单例子 • 12.2.htm getElementById()方法 • 12.3....

    JavaScript笔记

    JavaScript:定义行为和动作 (基于对象和事件驱动的客户端脚本语言;也是一种广泛应用于客户端Web开发的脚本语言) 基于对象:网页中的一切元素都是假象!不需要new,即可直接使用 事件驱动:JavaScript的执行都是...

    javascript获取作用在元素上面的样式属性代码

    代码如下: [removed] = function(){ var oDIv = document.getElementById(‘progressBox’); var sytleElemt = window.getComputedStyle(oDIv); for(var i=0;i&lt;sytleElemt.length;i++){ if( typeof sytleElemt...

    精通JavaScript

    • 11.9.htm 元素属性综合应用 • 11.10.htm 动态修改表单元素内容 第12章(\第12章) • 12.1.htm Document树的简单例子 • 12.2.htm getElementById()方法 • 12.3....

    javaScript对象

    4. 使用history和location对象的相关属性和方法可以轻松的实现游览器中“后退”、“前进”和“刷新”按钮的功能 5. Document对象的getElementById()方法用于访问唯一的元素 6. Document对象的getElementsByName()...

    107个常用javascript语句

    5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID號").name(或value) 6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase...

    JavaScript获取页面上某个元素的代码

    W3C标准推荐的语法是通过document文档对象获取DOM树内的内的某个元素,常见的方法有getElementById()、getElementsByName()、getElementsByTagName(),他们的作用分别通过id属性、name属性/标签名称返回单个...

    JavaScript Table行定位效果

    还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不...

    Javascript 访问样式表实现代码

    再记录一下 Javascript访问样式表 Javascript可以访问网页中元素的style属性,例如: ”main” xss=removed&gt;&lt;/div&gt; 通过js访问style属性 alert&#40;document.getElementById(“main”&#41;.style.backgroundColor); ...

Global site tag (gtag.js) - Google Analytics