`

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

 

分享到:
评论

相关推荐

    html,javascript元素属性文档

    JavaScript提供了访问和操作HTML元素属性的方法。例如,我们可以使用`document.getElementById`方法获取特定ID的元素,然后通过`.getAttribute`和`.setAttribute`来读取或修改元素的属性值。此外,JavaScript还可以...

    Javascript和Css属性对照

    在 JavaScript 中,属性主要分为对象属性和DOM(Document Object Model)属性。对象属性是定义在 JavaScript 对象上的键值对,例如,`person.name` 就是 `person` 对象的一个属性,用来存储名字。DOM 属性则是通过 ...

    CSS和JavaScript标签style属性对照表

    以下是对CSS和JavaScript中style属性的详细对照: ##### 边框属性(Border Properties) - **CSS属性**:`border` - **JavaScript属性**:`border` - **CSS属性**:`border-bottom` - **JavaScript属性**:`...

    JavaScript中getElementById方法的使用.pdf

    在IE浏览器中,getElementById方法对ID和Name属性不敏感,这意味着IE浏览器可以通过Name属性来获取元素,而不是通过ID属性。在Firefox浏览器中,getElementById方法严格区分ID和Name属性,需要使用ID属性来获取元素...

    javascript 常用的属性与方法

    在JavaScript中,属性和方法是编程的核心元素,它们允许我们操作和控制网页的各个方面。本篇文章主要聚焦于JavaScript中的一些常用属性和方法,特别是针对文档对象模型(DOM)的操作。 1. **document对象**:作为...

    javascript的属性和方法

    本文将详细介绍JavaScript中的属性和方法,这些属性和方法是构建功能丰富的网页应用的基础。 首先,我们要了解JavaScript对象的层次结构。JavaScript的核心对象包括浏览器对象、屏幕对象、窗口对象以及文档对象等。...

    javascript getElementById 使用方法及用法

    JavaScript中的getElementById方法是文档对象模型(DOM)提供的一个非常重要的方法,它允许开发者通过指定的ID获取页面中的HTML元素,进而可以读取或修改这些元素的属性,以及调用它们的方法和事件。下面将详细解释...

    javascript常用属性和方法[文].pdf

    在JavaScript中,存在许多常用的属性和方法,这些属性和方法是编写高效、可维护的JavaScript代码的关键。 首先,`align`属性用于设置元素的对齐方式,如`left`、`center`、`right`,而`vertical-align`则控制元素的...

    JS操作DOM元素属性和方法大全

    **JS操作DOM元素属性和方法大全** 在JavaScript中,DOM(Document Object Model)是一种标准,用于表示HTML或XML文档的结构,并提供了与这些文档交互的方法。DOM是浏览器提供的一种接口,使得JavaScript能够读取、...

    javascript动态生成页面元素

    本文将深入探讨如何利用JavaScript动态生成HTML页面元素,包括使用innerHTML属性和DOM(Document Object Model)方法两种主要方式,以及在不同浏览器环境下的兼容性问题。 ### 1. 使用innerHTML属性 `innerHTML`...

    JavaScript设置Div的margin参数

    margin 属性用于设置元素的外边距,而 JavaScript 可以帮助我们动态地设置元素的 margin 属性。 margin 属性可以接受一个、两个、三个或四个参数,每种情况下 margin 的含义都不同。 一个参数 当我们设置 margin ...

    JavaScript获取HTML DOM节点元素的方法的总结

    以下是对“JavaScript获取HTML DOM节点元素的方法的总结”的详细阐述,旨在帮助开发者更好地理解和应用DOM操作。 ### 一、通过`document`对象获取DOM节点 #### 1. `document.getElementById(elementId)` 这个方法...

    javascript 的Document属性和方法集合

    JavaScript中的`Document`对象是浏览器窗口中的主要对象之一,它代表了整个HTML或XML文档,并提供了访问和操作文档的各种属性和方法。以下是一些主要的`Document`属性和方法的详细说明: 1. **属性** - `document....

    JavaScript获取网页表单action属性的方法

    总结来说,JavaScript提供了一套强大的API,允许开发者获取和操作网页表单元素的各种属性,包括本文讨论的action属性。通过这些API,开发者可以对用户界面进行交互,使得Web应用更加动态和用户友好。理解并熟练运用...

    示例4:操作节点属性.rar_javascript操作节点属性

    DOM允许我们通过JavaScript来访问和修改网页中的元素、属性、文本等。本示例主要讲解如何使用JavaScript操作DOM节点的属性。 首先,我们需要了解DOM节点的基本概念。每个HTML元素都是一个DOM节点,包括元素节点、...

    javascript 常见脚本属性

    总的来说,理解并熟练运用这些JavaScript脚本属性和方法,对于创建交互式的网页至关重要。它们允许开发者动态更新页面内容,响应用户交互,以及与服务器进行数据通信,极大地增强了网页的功能性和用户体验。在学习...

    原生javascript实现css属性的set和get

    在JavaScript中,对CSS属性进行设置和获取是前端开发中常见的操作。原生JavaScript提供了DOM对象的style属性,可以用来直接操作元素的内联样式。本文将深入探讨如何使用原生JavaScript来实现CSS属性的set和get方法,...

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

    描述部分概括了文章内容的主要方向,即通过JavaScript读取和设置文档元素的样式属性,文章将介绍相关的方法和原理,供读者参考。 标签“javaScript 样式属性”强调了文章内容的专业领域,即JavaScript语言和其操作...

Global site tag (gtag.js) - Google Analytics