zmiana elementu klasy css
=?ISO-8859-2?Q?Kud=B3aty?= - 15-05-2006 00:56
zmiana elementu klasy css
Witam,
szukam sposobu na zmiane elementu klasy CSS z poziomu JavaScript.
przykładowo jest klasa:
..klasa
{ margin: 5px; }
W jaki sposób przypisać jej dynamicznie inną wartość?
Oczywiście elementów w klasie jest wiele innych których nie nalezy zmieniac.
Pozdrawiam,
--
Kudłaty
yew - 16-05-2006 00:17
Kudłaty napisał(a):
> Witam,
> szukam sposobu na zmiane elementu klasy CSS z poziomu JavaScript.
> przykładowo jest klasa:
>
> .klasa
> { margin: 5px; }
element.className
--
yew
=?ISO-8859-2?Q?Kud=B3aty?= - 16-05-2006 00:17
yew wrote:
> Kudłaty napisał(a):
>> Witam,
>> szukam sposobu na zmiane elementu klasy CSS z poziomu JavaScript.
>> przykładowo jest klasa:
>>
>> .klasa
>> { margin: 5px; }
>
> element.className
A można troszkę jaśniej? Np. jak wyglądałby zapis o zmianie margin na 6px ?
Pozdrawiam,
--
Kudłaty
Bogdan Blaszczak - 16-05-2006 00:17
yew napisał(a):
>> .klasa
>> { margin: 5px; }
>
>
> element.className
Tym mozesz przyporzadkowac inna klase dla danego elementu.
A jemu raczej chodzi o zmiane wartosci reguly (obiekt cssRule) w arkuszu
stylu (obiekt stylesheet)
To bedzie mniej wiecej cos takiego:
<script>
function zmienKlase(x){
var R=document.all?'rules':'cssRules'
document.styleSheets[0][R][0].style.margin=x
}
</script>
<style>
..klasa {margin: 5px; position: relative}
</style>
<div class="klasa">
<a
href="javascript:zmienKlase('100px')">
zmien klase</a>
</div>
Funkcja dla IE/Gecko. W Operze praktycznie nie ma szans na takie
dzialanie. Opera ma znaczne opoznienia w obsludze arkuszy stylow poprzez
DOM.
Swiadcza o tym czerwone 'No'
http://www.opera.com/docs/specs/js/dom/css/
--
BlaTek
=?ISO-8859-2?Q?Kud=B3aty?= - 16-05-2006 00:17
Bogdan Blaszczak wrote:
> document.styleSheets[0][R][0].style.margin=x
[...]
> href="javascript:zmienKlase('100px')">
A skąd wiadomo, że ma zmienić klase o nazwie: "klasa"? Czy [0][R][0] to ta
klasa w jakiś sposób?
Pozdrawiam,
--
Kudłaty
Bogdan Blaszczak - 16-05-2006 00:17
Kudłaty napisał(a):
> A skąd wiadomo, że ma zmienić klase o nazwie: "klasa"? Czy [0][R][0] to ta
> klasa w jakiś sposób?
Pierwsze 0 to index arkusza, drugie 0 to index reguly. Index oparty na
zerze, czyli w tym przypadku: pierwsza regula, w pierwszym arkuszu stylu
w dokumencie.
--
BlaTek
yew - 16-05-2006 00:17
Bogdan Blaszczak napisał(a):
> yew napisał(a):
>
>>> .klasa
>>> { margin: 5px; }
>>
>>
>> element.className
>
> Tym mozesz przyporzadkowac inna klase dla danego elementu.
>
> A jemu raczej chodzi o zmiane wartosci reguly (obiekt cssRule) w arkuszu
> stylu (obiekt stylesheet)
Faktycznie, nie doczytałem ;)
--
yew
=?ISO-8859-2?Q?Kud=B3aty?= - 16-05-2006 00:17
Bogdan Blaszczak wrote:
> Kudłaty napisał(a):
>
>> A skąd wiadomo, że ma zmienić klase o nazwie: "klasa"? Czy [0][R][0] to
>> ta klasa w jakiś sposób?
>
> Pierwsze 0 to index arkusza, drugie 0 to index reguly. Index oparty na
> zerze, czyli w tym przypadku: pierwsza regula, w pierwszym arkuszu stylu
> w dokumencie.
Genialne ;)
Udało mi się co miałem zrobić. A powiedz mi proszę czy da się odwołać do
tego przez 'nazwę', lub znaleźć tą nazwę (wtedy poradzę sobie w pętli).
Pozdrawiam.
--
Kudłaty
=?ISO-8859-2?Q?Kud=B3aty?= - 16-05-2006 00:17
Bogdan Blaszczak wrote:
> Kudłaty napisał(a):
>
>> A skąd wiadomo, że ma zmienić klase o nazwie: "klasa"? Czy [0][R][0] to
>> ta klasa w jakiś sposób?
>
> Pierwsze 0 to index arkusza, drugie 0 to index reguly. Index oparty na
> zerze, czyli w tym przypadku: pierwsza regula, w pierwszym arkuszu stylu
> w dokumencie.
Gapa ze mnie, działa ale nie w Mozilli. Proszę o podpowiedź, dzięki z
góry :)
Pozdrawiam.
--
Kudłaty
porneL - 16-05-2006 00:17
On Mon, 15 May 2006 00:49:39 +0100, Kudłaty <kudlaty@bez.adresu.email>
wrote:
> szukam sposobu na zmiane elementu klasy CSS z poziomu JavaScript.
> przykładowo jest klasa:
>
> ..klasa
> { margin: 5px; }
>
> W jaki sposób przypisać jej dynamicznie inną wartość?
> Oczywiście elementów w klasie jest wiele innych których nie nalezy
> zmieniac.
Zmiana samego arkusza nie będzie działała w Operze, ale da się to
rozwiązać inaczej:
document.body.className = 'zmien-na-100px';
..klasa {margin: 5px;}
body.zmien-na-100px .klasa {margin: 100px;}
Poza tym możesz zmieniać poszczególnym elementom className albo je
wyszukać używając selektorów i pogrzebać w ich .style: http://jquery.com
--
* html {redirect-to: url(http://kurs.browsehappy.pl);}
this.author = new Geek("porneL");
Bogdan Blaszczak - 16-05-2006 00:17
Kudłaty napisał(a):
> Genialne ;)
> Udało mi się co miałem zrobić. A powiedz mi proszę czy da się odwołać do
> tego przez 'nazwę', lub znaleźć tą nazwę (wtedy poradzę sobie w pętli).
Da sie
function zmienKlase(rule,property,value){
var i,R=document.all?'rules':'cssRules'
R=document.styleSheets[0][R]
for(i=0;i<R.length;i++)
if(R[i].selectorText==rule)
R[i].style[property]=value
}
wywolanie
zmienKlase('.klasa','margin','100px')
Nie wiem dlaczego Ci to nie dziala w Mozilli. Moze masz jakis drobny
blad formalny w samym arkuszu CSS. Silnik Gecko jest czuly na takie
bledy i moze sie sypnac..
Aż sprawdzilem dokladniej. Mnie to dziala na wszystkich wersjach
Mozilli/FF jakie mam. A troche ich mam ;)
Dziala nawet na bardzo leciwym Firebird 0.7 (wersja z 2003)
--
BlaTek
Bogdan Blaszczak - 16-05-2006 00:17
Bogdan Blaszczak napisał(a):
> zmienKlase('.klasa','margin','100px')
Oczywiscie nazwa powyzszej funkcji "zmienKlase" jest juz nieadekwatna,
bo w tej wersji mazna juz zmienic rozne selektory, nie tylko klasy
--
BlaTek
=?ISO-8859-2?Q?Kud=B3aty?= - 17-05-2006 00:43
Bogdan Blaszczak wrote:
> Bogdan Blaszczak napisał(a):
>
>> zmienKlase('.klasa','margin','100px')
>
> Oczywiscie nazwa powyzszej funkcji "zmienKlase" jest juz nieadekwatna,
> bo w tej wersji mazna juz zmienic rozne selektory, nie tylko klasy
function zmienKlase(rule,property,value){
var i,R=document.all?'rules':'cssRules'
R=document.styleSheets[0][R];
for(i=0;i<R.length;i++)
if(R[i].selectorText.toLowerCase().replace(/\[.+\]/, "")==rule)
R[i].style[property]=value
}
To wersja procedury działająca na wszystkim co miałem pod ręką: IE, Mozilla,
Konqueror.
Konqueror zgłasza nazwy selektorów tak:
div.boxn[class~="boxn"]
Zaś IE tak: DIV.boxn
Stąd właśnie toLowerCase oraz replace.
Dziękuję i Pozdrawiam,
--
Kudłaty
Bogdan Blaszczak - 17-05-2006 00:43
Kudłaty napisał(a):
>
> Konqueror zgłasza nazwy selektorów tak:
> div.boxn[class~="boxn"]
>
> Zaś IE tak: DIV.boxn
Hmm.. czyli są spore różnice pomiędzy browserami w interpretacji
selectorText. Nigdy tego w praktyce nie używałem, więc specjalnie nie
testowałem. Ciekawe co podaje Safari. Teoretycznie chyba to samo co Konq..
>
> Stąd właśnie toLowerCase oraz replace.
Tylko teraz musisz pamiętać żeby do funkcji jako rule podawać tylko małe
litery '.mojaklasa', nawet jeśli w arkuszu masz .MojaKlasa
Lub ewentualnie w if-e dać po prawej stronie również rule.toLowerCase()
--
BlaTek
zanotowane.pldoc.pisz.plpdf.pisz.pleffulla.pev.pl
|
Firebird - zmiana NULL na NOT NULL
Zmiana koloru tekstu i/lub =?ISO-8859-2?Q?t=B3a_w_pojedyncze?==?ISO-8859-2?Q?j_kom=F3rce_DBGrid?=
[pgsql] Zmiana schematu do =?ISO-8859-2?Q?kt=F3rego_nalezy_o?==?ISO-8859-2?Q?biekt=2E?=
[ORACLE] Zmiana adresu IP Hosta Oracle
klient oracle (zmiana domyslna klienta oracla)
[ORACLE] Oracle performance manager - zmiana jeżyka z PL na EN
=?ISO-8859-2?Q?[MSSQL]_Zmiana_collation_istniej=B1cego_serwera?=
[ms sql 2000] Replikacja - zmiana typu kolumny w tabeli ?
[trudne] Stan zapasu w kostce OLAP a zmiana przedzialow czasowych
hurtowa zmiana polskich liter w nazwach =?ISO-8859-2?Q?plik=F3w_?=
zanotowane.pldoc.pisz.plpdf.pisz.pltejsza.htw.pl
Cytat
Decede mihi sole - nie zasłaniaj mi słonca.
Gdy kogoś kochasz, jesteś jak stworzyciel świata - na cokolwiek spojrzysz, nabiera to kształtu, wypełnia się barwą, światłem. Powietrze przytula się do ciebie, choćby był mróz, a ty masz w sobie tyle radości, że musisz ją rozdawać wokoło, bo się w tobie nie mieści
Hoc fac - tak czyń.
A tergo - od tyłu; z tyłu.
I czarne włosy posiwieją. Safona |
|
