<!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>animate</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
border:0px;
}
#div1{
border:1px #000 solid;
width:240px;
margin:0 auto;
margin-top:120px;
height:240px;
}
</style>
</head>
<body>
<div id="div1">
div
</div>
<div class="div">class1</div>
<span>span2</span>
<div class="div">class2</div>
<span>span1</span>
<script type="text/javascript">
function $(element){
elem=new Object();
elem.element=element.split(":")[0];
elem.eq=element.split(":")[1]||-1;
elem.length=0;
elem.elem=[];
elem.get=function(){
var eh=elem.element.substr(0,1);
var el=elem.element.substr(1);
if(elem.element==""||null){
//元素为空;
emessage1="Element is undefined!";
throw(emessage1)
}
else{
//获取元素
switch(eh){
case '#': this.elem.push(document.getElementById(el));break;
case '.':this.elem=this.byClass(el);break;
default:this.elem=this.byTag();break;
}
//判断获取的元素是否有
if(this.elem){
return this.elem;
}
else{
emessage2=elem.element+" is undefined!";
throw(emessage2);
}
}
};
//获取类
elem.byClass=function(el){
var aClass=[];
if(document.getElementsByClassName){
cls=document.getElementsByClassName(el);
for(var i=0;i<cls.length;i++){
aClass.push(cls[i]);
}
return aClass;
}
else{
var alln=document.all||document.getElementsByTagName("*");
for(var i=0;i<alln.length;i++){
if(alln[i].className==el){
aClass.push(alln[i]);
}
};
return aClass;
}
}
//获取tagName
elem.byTag=function(){
var doc=[];
var docn=document.getElementsByTagName(elem.element);
for(var i=0;i<docn.length;i++){
doc.push(docn[i]);
}
return doc;
}
//设置样式
elem.css=function(porName,porStyle){
this.length=this.get().length;
for(var i=0;i<this.length;i++){
// this.style=(this.get()[i].getAttribute("style")==null)?"":this.get()[i].getAttribute("style");
this.style=(this.get()[i].style.cssText==null)?"":this.get()[i].style.cssText+";";
this.style+=porName+":"+porStyle+";";
// alert(this.style);
//this.get()[i].setAttribute("style",this.style)
this.get()[i].style.cssText=this.style;
}
};
return elem;
}
window.onload=function(){
$(".div").css("background","black");
$("span").css("background","red");
$("span").css("color","blue");
//var div=document.getElementById("div1");
//div.style.cssText="background:red;"
}
</script>
</body>
</html>
分享到：
相关推荐
以上就是通过JavaScript获取DOM中class元素的方法和相关知识点的介绍。这涉及到对DOM操作的理解和对特定方法的应用，对于前端开发者来说是一项基础且重要的技能。掌握了这些知识点，开发者可以更加灵活地处理页面...
为了进一步学习，可以打开并查看这个文件，结合上述解释，理解并实践JavaScript获取表格元素ID的技巧。同时，标签“源码”和“工具”暗示了这篇博文可能包含具体的代码示例和可能使用的辅助工具或库，这有助于深化...
### JavaScript给元素添加多个class的简洁实现 #### 概述 在Web开发中，通过JavaScript动态地为HTML元素添加或删除CSS类名是一项常见的需求。本文档将详细介绍如何使用JavaScript来给HTML元素添加多个class，并...
在探讨如何在JSP（JavaServer Pages）中获取所有具有相同ID的特定标签元素之前，我们首先需要理解几个关键概念：JSP、DOM（Document Object Model）、JavaScript以及HTML标签。 ### JSP（JavaServer Pages） JSP是...
这些方法只是基本的方法，如果使用了 Prototype 等 JavaScript 库，可能还获得其他不同的方法，例如通过节点的 class 获取等等。不过，如果能够灵活运用上面的各种方法，相信应该可以应付大部分的程序。
标签“js 获取属性值”进一步明确了讨论的主题，即如何通过JavaScript获取CSS属性值。 在提供的代码示例中，定义了一个名为`getStyle`的函数，该函数接受两个参数：`obj`表示目标元素，`attr`表示要获取的CSS属性名...
例如，如果你知道元素的类名或者ID，你可以直接使用`.class`或`#id`来选取。如果你要根据特定的样式属性来选择元素，可以使用`:css`选择器： ```javascript var elementsWithRedColor = $('*:css(color, rgb(255, 0...
本文将详细介绍如何使用JavaScript获取表格中td元素的值，并通过实例分析一些操作技巧。 首先，当需要获取表格中多个行的任意td值时，可以为每个td元素分配一个共同的class。这样做的好处是可以通过class来选取所有...
### JavaScript通过Class获取元素的方法详解 在Web开发中，JavaScript是一种非常重要的客户端脚本语言，它可以帮助我们实现页面上的动态效果、数据交互等复杂功能。其中，获取DOM元素是进行这些操作的基础。本文将...
在JavaScript编程中，获取页面上的DOM元素是一项基本且重要的操作。而基于元素的class属性获取元素集合是实现这一操作的常见方式之一。文档中提供的代码示例正是针对这一需求的功能实现，它定义了一个名为`...
- `getElementById`: 通过ID获取元素。 - `getElementsByClassName`: 通过类名获取元素集合。 - `getElementsByTagName`: 通过标签名获取元素集合。 - `querySelector`: 获取匹配CSS选择器的第一个元素。 - `...
例如，获取ID为"dom"的元素下的所有子`div`元素，可以使用`getElementsByTagName()`方法。但在Firefox浏览器中，换行会被视为一个文本节点，导致获取到的子元素数量多于预期。因此，我们需要编写一个函数`del_space...
在探讨如何使用JavaScript获取标签ID并改变其style属性之前，我们需要了解几个关键的Web开发知识点，包括HTML元素的ID属性、JavaScript中的DOM操作以及CSS样式的应用方式。以下将详细阐述这些概念，并结合给定的代码...
特别是在涉及到表单数据处理时，如何获取特定表单元素的值是一个常见的需求。本文将通过一个简单实例，讲解如何在JavaScript中获取JSP表单中单选按钮（radio）类型的值。 首先，我们需要了解单选按钮（radio）在...
例如，`document.getElementById("dom").getElementsByTagName("div")`会获取ID为`dom`的元素下所有的`div`元素。 - `childNodes`属性可以获取所有类型的子节点，包括元素节点、文本节点等。它比`...
在JavaScript中，改变元素的背景图像（backgroundImage）和类名称（class）是常见的操作，这对于动态更新网页的样式和交互性至关重要。本文将详细探讨这两个主题，并提供实用的代码示例。 首先，我们来讨论如何使用...