Как изменять параметры целого класса css-стиля через JS?
Думаю вопрос понятен из темы, приведу пример:
<style>
.ico{
position:absolute;
top:10px;
left:10px;
background-color:red;
border:1 inset;
}
</style>
<script>
function a(){
//здесь мне надо поменять стиль всего класса ico
}
</script>
<body>
<div id='mainico' class='ico' onclick="a()"></div>
<div id='ico1' class='ico'></div>
<div id='ico2' class='ico'></div>
<div id='ico3' class='ico'></div>
<div id='ico4' class='ico'></div>
</body>
Вот пример, так что, кто знает помогите, если конечно такое вообще возможно))
<style>
.ico{
position:absolute;
top:10px;
left:10px;
background-color:red;
border:1 inset;
}
</style>
<script>
function a(){
//здесь мне надо поменять стиль всего класса ico
}
</script>
<body>
<div id='mainico' class='ico' onclick="a()"></div>
<div id='ico1' class='ico'></div>
<div id='ico2' class='ico'></div>
<div id='ico3' class='ico'></div>
<div id='ico4' class='ico'></div>
</body>
Вот пример, так что, кто знает помогите, если конечно такое вообще возможно))
Вообще-то принято пользоваться поиском.
Для IE:
, для всего остального
.
Для IE:
Код:
document.styleSheets[0].addRule(".ico","background-color: silver");
Код:
document.styleSheets[0].insertRule(".ico {background-color: silver;}",0);
Спасибо =)
alekciy извини, НО... мне так, как ты сказал не подходит. Хотя, ты прав, это я пример написал не подумав. Таблица-то у меня находится в файле, а коллекция styleSheets работает с объектами styleSheet документа (даже не с тем что мы пишем в теге <style>).
И... я посмотрел, как ты посоветовал, в поиске. Там говорилось ещё и о том, что можно обращаться к классу по имени, но способ так и не представили, так что вопрос остаётся открытым или даже так - более прозрачным: "Как обращаться в JS к классу стиля по имени?"
И... я посмотрел, как ты посоветовал, в поиске. Там говорилось ещё и о том, что можно обращаться к классу по имени, но способ так и не представили, так что вопрос остаётся открытым или даже так - более прозрачным: "Как обращаться в JS к классу стиля по имени?"
document.getElementById('idBlock').styleName = "styleName" - это обращение по имени
document.getElemenetById('idBlock').style.border = "1px #000 solid" - установка нового правила для текущего эллемента
document.getElemenetById('idBlock').style.border = "1px #000 solid" - установка нового правила для текущего эллемента
[QUOTE=shaelf]document.getElementById('idBlock').styleName = "styleName" - это обращение по имени
document.getElemenetById('idBlock').style.border = "1px #000 solid" - установка нового правила для текущего эллемента[/QUOTE]
shaelf! Будь внимательнее ))) ему нужно переназначить стиль для всего класса, а не для стиля отдельного элемента.
document.getElemenetById('idBlock').style.border = "1px #000 solid" - установка нового правила для текущего эллемента[/QUOTE]
shaelf! Будь внимательнее ))) ему нужно переназначить стиль для всего класса, а не для стиля отдельного элемента.
[QUOTE=Leviafan]alekciy извини, НО... мне так, как ты сказал не подходит.[/QUOTE]
Ну и какая разница, где CSS?! Ты видно не пробывал этот пример. У меня и с внешним файлом (<link href="style.css" type="text/css" rel="stylesheet">) работает. Да и не може не работать, ведь изменение стиля идет через DOM API!
Ну и какая разница, где CSS?! Ты видно не пробывал этот пример. У меня и с внешним файлом (<link href="style.css" type="text/css" rel="stylesheet">) работает. Да и не може не работать, ведь изменение стиля идет через DOM API!
[QUOTE=Leviafan]Там говорилось ещё и о том, что можно обращаться к классу по имени,[/QUOTE]
Через DOM можно много чего сделать. И имя класса вычислить, а даже сколько в данный момент и для каких элементов и сколько загружено свойств и при желании переназначить их.
И нормальный браузеры подобные Opera или FireFox позволяют так делатьно, но не гребаный IE. А посколько очень много юзверей сидят под ослом, то болшого толку от такого JS скрипта не будет. Кросс-браузерность не поддерживает, что для сайта не есть гуд.
Через DOM можно много чего сделать. И имя класса вычислить, а даже сколько в данный момент и для каких элементов и сколько загружено свойств и при желании переназначить их.
И нормальный браузеры подобные Opera или FireFox позволяют так делатьно, но не гребаный IE. А посколько очень много юзверей сидят под ослом, то болшого толку от такого JS скрипта не будет. Кросс-браузерность не поддерживает, что для сайта не есть гуд.
Тогда если кому не сложно, объясните мне пожалуйста, где это может пригодится и это нельзя будет сделать средствами JavaScript
shaelf ты о чём?
[QUOTE=alekciy]Через DOM можно много чего сделать. И имя класса вычислить, а даже сколько в данный момент и для каких элементов и сколько загружено свойств и при желании переназначить их.
И нормальный браузеры подобные Opera или FireFox позволяют так делатьно, но не гребаный IE.[/QUOTE]
Мне так-то под IE и нужно =)
Ну и получается, что решить проблему обращения к классу по имени через JS в IE нельзя?!
И нормальный браузеры подобные Opera или FireFox позволяют так делатьно, но не гребаный IE.[/QUOTE]
Мне так-то под IE и нужно =)
Ну и получается, что решить проблему обращения к классу по имени через JS в IE нельзя?!
>>shaelf ты о чём?
Я о смене / добавлении / изменении средствами JavaScript css файла. Для чего это нужно? Для "я умею" или это преследуются более высокие идеалы? Только при написании JavaScript кода товарищи, не забывайте, что он юзает локальные ресурсы. Мне нужно было создать несложную таблицу серез DOM и при создании более или менее большой таблицы та же опера просто сделала 100% нагрузку на проц (AMD64 3000+) и висела так минут 5 (потом я её принудительно закрыл).
Я о смене / добавлении / изменении средствами JavaScript css файла. Для чего это нужно? Для "я умею" или это преследуются более высокие идеалы? Только при написании JavaScript кода товарищи, не забывайте, что он юзает локальные ресурсы. Мне нужно было создать несложную таблицу серез DOM и при создании более или менее большой таблицы та же опера просто сделала 100% нагрузку на проц (AMD64 3000+) и висела так минут 5 (потом я её принудительно закрыл).
>> Для чего это нужно?
Это нужно для более простого решения одной задачки, её конечно можно решить по-другому, но хочется использовать именно этот вариант...
Это нужно для более простого решения одной задачки, её конечно можно решить по-другому, но хочется использовать именно этот вариант...
[QUOTE=Leviafan]Мне так-то под IE и нужно =)
[/QUOTE]
По сабжу темы я уже ответил, как для всех нормальных браузерах, так и для ослика.
[/QUOTE]
По сабжу темы я уже ответил, как для всех нормальных браузерах, так и для ослика.
[QUOTE=alekciy]По сабжу темы я уже ответил, как для всех нормальных браузерах, так и для ослика.[/QUOTE]
Ты постоянно пытаешься меня подловить, что я не пробую то, о чём мне говорят, а сужу по представлениям :( , так вот ещё раз повторю, то что ты мне уже написал НЕ РАБОТАЕТ и вопрос остался открытым...
Пример.
А теперь попробуй пощёлкать по диву и скажи мне, в чём я опять тебя не понял?.. (Вот я могу даже объяснить, почему это не работает, а объяснение говорит, что изменять свойства класса нужно по-другому!)
Ты постоянно пытаешься меня подловить, что я не пробую то, о чём мне говорят, а сужу по представлениям :( , так вот ещё раз повторю, то что ты мне уже написал НЕ РАБОТАЕТ и вопрос остался открытым...
Пример.
Код:
<HTML>
<head>
<link rel="stylesheet" href="files/main.css" type="text/css"/>
<style>
.ico{
position:absolute;
top:10px;
left:10px;
width:400;
height:300;
background-color:red;
border:1 inset;
}
</style>
<script>
function a(){
document.styleSheets[0].addRule(".ico","background-color: silver");
}
</script>
</head>
<body>
<div id='mainico' class='ico' onclick="a()"></div>
</body>
</HTML>
<head>
<link rel="stylesheet" href="files/main.css" type="text/css"/>
<style>
.ico{
position:absolute;
top:10px;
left:10px;
width:400;
height:300;
background-color:red;
border:1 inset;
}
</style>
<script>
function a(){
document.styleSheets[0].addRule(".ico","background-color: silver");
}
</script>
</head>
<body>
<div id='mainico' class='ico' onclick="a()"></div>
</body>
</HTML>
А теперь попробуй пощёлкать по диву и скажи мне, в чём я опять тебя не понял?.. (Вот я могу даже объяснить, почему это не работает, а объяснение говорит, что изменять свойства класса нужно по-другому!)
[QUOTE=Leviafan]Ты постоянно пытаешься меня подловить, что я не пробую то, о чём мне говорят, а сужу по представлениям[/QUOTE]
Именно так. Если ты что-либо утверждаешь, то должен доказать свои слова кодом. Потому как если ты не можешь доказать, то как минимум заблуждаешься, как максимум вводишь в заблуждение других.
Именно так. Если ты что-либо утверждаешь, то должен доказать свои слова кодом. Потому как если ты не можешь доказать, то как минимум заблуждаешься, как максимум вводишь в заблуждение других.
[QUOTE=Leviafan]то что ты мне уже написал НЕ РАБОТАЕТ и вопрос остался открытым...
А теперь попробуй пощёлкать по диву и скажи мне, в чём я опять тебя не понял?.. [/QUOTE]
ЭТО РАБОТАЕТ!
Ты сказал, что у тебя стили во внешней CSS я тебе и напил код. Если бы сказал, что у тебя таблица стилей как втроеная, так и внешняя, и нужно изменять свойства во внетреней, я бы тебе написал для этого варианта код.
Потому как нужно понимать, что styleSheets[n] содержить все таблицы стилей для данного документа. Первая таблица в данном случае это подключеная, вторая (индекс 1) это втроеная. Если написать:
, то пришло бы в JS прописывать
document.styleSheets[2].addRule(".ico","background-color: silver");
Надеюсь это-то понятно?!
А теперь попробуй пощёлкать по диву и скажи мне, в чём я опять тебя не понял?.. [/QUOTE]
ЭТО РАБОТАЕТ!
Код:
<HTML>
<head>
<link rel="stylesheet" href="files/main.css" type="text/css"/>
<style>
.ico{
position:absolute;
top:10px;
left:10px;
width:400;
height:300;
background-color:red;
border:1 inset;
}
</style>
<script>
function a(){
document.styleSheets[1].addRule(".ico","background-color: silver");
}
</script>
</head>
<body>
<div id='mainico' class='ico' onclick="a()">1111111</div>
</body>
</HTML>
<head>
<link rel="stylesheet" href="files/main.css" type="text/css"/>
<style>
.ico{
position:absolute;
top:10px;
left:10px;
width:400;
height:300;
background-color:red;
border:1 inset;
}
</style>
<script>
function a(){
document.styleSheets[1].addRule(".ico","background-color: silver");
}
</script>
</head>
<body>
<div id='mainico' class='ico' onclick="a()">1111111</div>
</body>
</HTML>
Ты сказал, что у тебя стили во внешней CSS я тебе и напил код. Если бы сказал, что у тебя таблица стилей как втроеная, так и внешняя, и нужно изменять свойства во внетреней, я бы тебе написал для этого варианта код.
Потому как нужно понимать, что styleSheets[n] содержить все таблицы стилей для данного документа. Первая таблица в данном случае это подключеная, вторая (индекс 1) это втроеная. Если написать:
Код:
<link rel="stylesheet" href="files/main.css" type="text/css"/>
<style>
.my_class {
position:absolute;
top:10px;
}
</style>
<style>
.ico{
position:absolute;
top:10px;
left:10px;
width:400;
height:300;
background-color:red;
border:1 inset;
}
</style>
<style>
.my_class {
position:absolute;
top:10px;
}
</style>
<style>
.ico{
position:absolute;
top:10px;
left:10px;
width:400;
height:300;
background-color:red;
border:1 inset;
}
</style>
, то пришло бы в JS прописывать
document.styleSheets[2].addRule(".ico","background-color: silver");
Надеюсь это-то понятно?!
Leviafan
Кстати, как видишь, если я отверждаю что-либо, то могу свою правоту доказать конкретным кодом который можно скопировать с форума и уведиться, что он работает.
Кстати, как видишь, если я отверждаю что-либо, то могу свою правоту доказать конкретным кодом который можно скопировать с форума и уведиться, что он работает.
alekciy, большое Тебе cпасибо! =)