Форум

dmitry111 · #1 (**permalink**) 13.02.2013, 08:22

Как заменить класс элементов обратившись непосредственно к ним с помощью их класса)

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>

dmitry111 · #2 (**permalink**) 13.02.2013, 08:52

вариант # 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>

критикуем, предлагаем свои варианты

ksa · #3 (**permalink**) 13.02.2013, 09:00

Сообщение от dmitry111

Как заменить класс элементов обратившись непосредственно к ним с помощью их класса)

Как вариант...

<!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>

ksa · #4 (**permalink**) 13.02.2013, 09:03

Или так...

<!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>

dmitry111 · #5 (**permalink**) 13.02.2013, 09:04

Сообщение от ksa

Как вариант...

ksa,

нет)))
Надо обращаться через класс!

dmitry111 · #6 (**permalink**) 13.02.2013, 09:05

Сообщение от ksa

Или так...

ksa,

и без jQuery)

ksa · #7 (**permalink**) 13.02.2013, 09:05

Сообщение от dmitry111

Надо обращаться через класс!

И каким образом ты это собираешся делать без JQ?

ksa · #8 (**permalink**) 13.02.2013, 09:06

Сообщение от dmitry111

document.getElementsByClassName("xxx");

Это не везде есть...

рони · #9 (**permalink**) 13.02.2013, 09:24

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>

рони · #10 (**permalink**) 13.02.2013, 09:29

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>

Форум

Справочник

Discord чат

Курсы javascript