Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как изменить класс элементов (https://javascript.ru/forum/misc/35505-kak-izmenit-klass-ehlementov.html)

dmitry111 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 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 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 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 13.02.2013 09:04
Цитата:
Сообщение от ksa
Как вариант...
ksa,

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

dmitry111 13.02.2013 09:05
Цитата:
Сообщение от ksa
Или так...
ksa,

и без jQuery)

ksa 13.02.2013 09:05
Цитата:
Сообщение от dmitry111
Надо обращаться через класс!
И каким образом ты это собираешся делать без JQ?

ksa 13.02.2013 09:06
Цитата:
Сообщение от dmitry111 
document.getElementsByClassName("xxx");
Это не везде есть...

рони 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>

рони 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>


Часовой пояс GMT +3, время: 01:23.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице