как изменить класс элементов
Как заменить класс элементов обратившись непосредственно к ним с помощью их класса)
function replaceClass (oldClass, newClass) {
var elements = d.getElementsByClassName(oldClass),
i,
len;
for (i = 0, len = elements.length; i < len; i += 1) {
elements[i].className = newClass;
}
}
Конструкция работает, но (что и логично) не совсем правильно:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.xxx {
width: 50px;
height: 50px;
background: blue;
margin: 10px;
float: left;
}
.yyy {
width: 50px;
height: 50px;
background: red;
margin: 10px;
float: left;
}
</style>
<title></title>
</head>
<body>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<script>
document.onclick = function replaceClass () {
var elements = document.getElementsByClassName("xxx"),
i,
len;
for (i = 0, len = elements.length; i < len; i += 1) {
elements[i].className = "yyy";
}
};
</script>
</body>
</html>
|
вариант # 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.xxx {
width: 50px;
height: 50px;
background: blue;
margin: 10px;
float: left;
}
.yyy {
width: 50px;
height: 50px;
background: red;
margin: 10px;
float: left;
}
</style>
<title></title>
</head>
<body>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<script>
document.onclick = function replaceClass() {
var elements = document.getElementsByClassName("xxx");
if (elements[0]) {
elements[0].className = "yyy";
replaceClass();
}
};
</script>
</body>
</html>
критикуем, предлагаем свои варианты |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.xxx {
height: 50px;
margin: 5px;
background: blue;
}
.yyy {
height: 50px;
margin: 5px;
background: red;
}
</style>
<script type="text/javascript">
function replaceClass() {
var o = document.getElementsByTagName("div"),
i;
for (i = 0; i<o.length; i++) {
if (o[i].className=='xxx') {
o[i].className = "yyy"
};
};
};
</script>
</head>
<body>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<button onclick='replaceClass();'>test</button>
</body>
</html>
|
Или так...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.box {
height: 50px;
margin: 5px;
}
.xxx {
background: blue;
}
.yyy {
background: red;
}
</style>
<script type="text/javascript">
function replaceClass() {
$('.xxx').removeClass('xxx').addClass('yyy');
};
</script>
</head>
<body>
<div class="box xxx"></div>
<div class="box xxx"></div>
<div class="box xxx"></div>
<div class="box xxx"></div>
<div class="box xxx"></div>
<button onclick='replaceClass();'>test</button>
</body>
</html>
|
Цитата:
нет))) Надо обращаться через класс! |
Цитата:
и без jQuery) |
Цитата:
|
Цитата:
|
dmitry111,
Вариант ...)))
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.xxx {
width: 50px;
height: 50px;
background: blue;
margin: 10px;
float: left;
}
.yyy {
width: 50px;
height: 50px;
background: red;
margin: 10px;
float: left;
}
</style>
<title></title>
</head>
<body>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<script>
document.onclick = function replaceClass () {
var elements = document.getElementsByClassName("xxx"),
i,
len;
for (i = elements.length-1; i > -1; i -= 1) {
elements[i].className = "yyy";
}
};
</script>
</body>
</html>
|
dmitry111,
или так
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.xxx {
width: 50px;
height: 50px;
background: blue;
margin: 10px;
float: left;
}
.yyy {
width: 50px;
height: 50px;
background: red;
margin: 10px;
float: left;
}
</style>
<title></title>
</head>
<body>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<div class="xxx"></div>
<script>
document.onclick = function replaceClass () {
var elements = document.getElementsByClassName("xxx");
for (; elements[0];) {
elements[0].className = "yyy";
}
};
</script>
</body>
</html>
|
Цитата:
Правда это примитивненький фикс для осла. И он вместо NodeList возвращает Array, так что работать придется так:
var elements = document.getElementsByClassName("xxx");
elements = Array.prototype.slice(elements);
for (var i = 0, ; i < elements.length; i++) {
elements[i].className = "yyy";
}
|
потестировал скорость моего варианта и варианта от рони
Использовал в нагрузке 2000 элементов. Результаты (в ms) первый мой, второй - от рони: Safari 157 163 Chrome 51 62 Opera 461 406 Firefox 197 139 Firefox после тестинга - умирает :lol: Я думал что for будет слишком нагружать, но как видно, он даже чуть быстрее! |
Если так?
function modifyClass(className,func,param){
var objecs = document.getElementsByClassName(className);
for(i=0; i<objecs.length; i++){
var id = objecs[i].id;
if(func == 'renameClass'){
document.getElementById(id).className = param;
if( objecs.length > 0 ){
modifyClass(className,func,param);
}
}
}
}
function modifyClass('xxx','renameClass','yyy')
|
Блин, не ожидал и не знал что переменная модифицируется. Я почему-то думал что при назначении в переменную коллекции, сама коллекция составляется и назначается. А дальше просто хранятся ссылки на элементы.
Не ожидал что при обращении к переменной коллекция составляется заново. Както это тупо... |
| Часовой пояс GMT +3, время: 00:22. |