Dlaczego this.style działa tylko w operze, a w firefox już nie?

0

<span onmouseover="this.style='font-weight:bold'">test</span>

Dlaczego this.style działa w operze, a w ff, czy chrome nie?

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).

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0