<span onmouseover="this.style='font-weight:bold'">test</span>
Dlaczego this.style działa w operze, a w ff, czy chrome nie?
0
0
Wygląda na to, że to co piszesz jest nieprawdą. Wklej poniższy kod do edytora i zapisz tak, jak jest, jako dokument HTML. Otwórz go w najnowszej Operze. Najedź myszą na tekst "test". Pogrubi się.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Opera test</title>
</head>
<body>
<p><span onmouseover="this.style='font-weight:bold'">test</span></p>
</body>
</html>
Powyższy kod zawiera (dosłownie) fragment, który zamieściłeś wyżej.
Jeśli u Ciebie nie działa, to może masz np. wyłączone skrypty :P
0
Jeżeli już koniecznie chcesz używać js to:
onmouseover="this.style.fontWeight='bold'"
... ale chyba prościej byłoby css:hover zamiast onmouseover.
0
A to przepraszam, nie doczytałem i zaliczyłem #fail
Jak tak się teraz zastanowię, to Opera zachowuje się dziwnie, pozwalając Ci ustawiać w ten sposób element.style. To nie jest atrybut style, tylko API JavaScriptowe. To API ma postać OBIEKTU, a nie ciągu znaków ze stylami. Nie ustawia się tego jak element.style = "font-weight: bold", tylko tak: element.style.fontWeight = "Bold". Oczywiście, w Twoim wypadku element jest ukryty w referencji this.
edit: (jak się ma moda, to mogę se edytować moje anonimy ;) )
Rozwinę jeszcze to, co napisał @marcinsvr. Do takich rzeczy trzeba używać CSS, nie skryptów. Tu nie ma dyskusji. Jeśli chcesz zmienić coś prezentacyjnego, to -- o ile tylko się da -- użyj warstwy prezentacyjnej, czyli CSS. Jeśli z jakichś powodów w CSS nie możesz przypisać danej prezentacji (np. wyboldowanej czcionki) do danego zachowania (:hover to nie to samo co Twój kod; Twój kod obecnie dodaje bolda, ale nie usuwa go po zjechaniu kursora), to w najgorszym wypadku zmodyfikuj poprzez JavaScript klasę elementu. A w CSS użyj klas(y), by powiedzieć, jak element ma w danej chwili wyglądać.
Nie da się tak robić w 100% przypadków, szczególnie gdy chcemy animować np. kolor. Wtedy może być niepraktyczne posiadanie np. 20 klas zawierających po kolei każde stadium i wtedy można ustawiać bezpośrednio element.style.color. Ale i to odchodzi już w zapomnienie, bo CSS3 zawiera moduł pozwalający na łatwe tworzenie takich animacji ( http://dev.w3.org/csswg/css3-transitions/ ).
0
Czyli tylko this.style zamienić na odczyt innej klasy? - bo tutaj przedstawiłem tylko font-weight, a używam jeszcze innych atrybutów. Nie ma innego sposobu?
0
grzesiek napisał(a)
Czyli tylko this.style zamienić na odczyt innej klasy? - bo tutaj przedstawiłem tylko font-weight, a używam jeszcze innych atrybutów. Nie ma innego sposobu?
Jeśli zmieniasz wiele atrybutów na raz to po prostu zrób sobie funkcję:
<script type="text/javascript">
function pogrub(element) {
element.style.fontWeight = "bold";
element.style.fontFamily = "Courier-New";
//etc
}
</script>
<a href="http://example.com" onmouseover="pogrub(this);">sth</a>
1
@dzek69:
Graceful degradation to rozsądne założenie, szczególnie w Sieci, gdzie i tak strona będzie wyglądała różnie na różnych urządzeniach, choćby z uwagi na różne rozdzielczości (i odwzorowanie kolorów).
A czy klient przypadkiem nie ma włączonego JavaScriptu? Większość ludzi ma. Klientów też ;). Użyj więc CSS3, a dla IE użyj dodatkowo CSS3 PIE ( http://css3pie.com/ ). PIE po prostu implementuje kilka rzeczy z CSS3 w IE za pomocą JScriptu. Będziesz miał zaokrąglone rogi, gradienty, przezroczystość etc. border-radius akurat zupełnie sam rozpoznaje; dla tła czasami trzeba dać dla niego osobną deklarację -pie-background, ale nie jest to jakaś wielka rzecz.
Ponieważ zdecydowana większość użytkowników IE ma włączony JS, PIE będzie tam działało i zobaczą stronę ze wszystkimi bajerami. Z tej części odbiorców strony, którzy mają <=IE8, zaledwie część bez JS-a zobaczy witrynę bez zaokrąglonych rogów.
Podpowiedź związana z PIE:
Jeśli wybierzesz wersję z .htc, to pamiętaj tylko, że ścieżkę w deklaracji behavior podaje się względem dokumentu, a nie arkusza stylów (jak np. ścieżki do obrazków). No i plik .htc musisz serwować z typem MIME text/x-component.
@Grzesiek:
W najgorszym razie użyj tego...
HTML:
<!-- Uwaga! zły kod! -->
<p><span onmouseover="this.className = 'highlighted''">test</span></p>
CSS:
```css
span.highlighted {
font-weight: bold;
color: red;
/* ... i tak dalej */
}
Ten kod i tak jest zły, ale lepszy niż to, co tam masz ;).
Front-End stron www składa się de facto z trzech języków. Każdy odpowiada za jedną warstwę/aspekt. HTML odpowiada za strukturę, CSS za prezentację (wygląd), a JavaScript za zachowanie.
U Ciebie wszystko jest pomieszane w jednym miejscu, podczas gdy języków tych nie należy mieszać z przyczyn utrzymaniowych.
Powinieneś mieć raczej coś takiego...
HTML:
<span class="test">test</span>
To struktura. Zauważ, że nie ma tu nic ani o wyglądzie, ani o zachowaniu tego elementu.
W osobnym pliku JavaScript:
// Dla uproszczenia: użyjmy jQuery
$("span.test").mouseenter(function() {
$(this).addClass("highlighted");
});
Tutaj jest zachowanie. Definiujemy, co ma się stać, gdy użytkownik najedzie myszą na spana. Dodajemy wtedy klasę highlighted.
I w osobnym pliku, CSS:
.highlighted {
font-weight: bold;
color: red;
/* ... */
}
I to była prezentacja: definiuje tylko wygląd elementu w danym stanie.
Tak to się powinno robić. Takie podejście przeważnie sprawia, że strona ładuje się szybciej (osobne pliku .js i .css mogą być łatwo cache'owane), a kod jest łatwiejszy w utrzymaniu i ogarnięciu (łatwo dodać style do druku, fixy dla IE, czystość HTML-a sprawia, że łatwiej ogarnąć strukturę dokumentu).