Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Jak odblokować modyfikację właściwości CSS

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Jak odblokować modyfikację właściwości CSS

Post 12.07.2017, 16:10:25

Dzień dobry Wszystkim. Właśnie studiuję książkę Head First JavaScript i w rozdziale trzecim znajduje się przykład strony, gdzie nie ma deklaracji typu dokumentu HTML. Po dodaniu typu dla HTML w wersji 5 "<!doctype html>" kod JavaScript odpowiadający za modyfikację właściwości CSS elementów strony przestaje działać. Chodzi o to, czy jest możliwość wyłączenia blokady poszczególnych, istniejących właściwości CSS (configurable: false), np. dla: document.getElementById('id_na przykład_jakiegoś_elementu_img').style;), który od ECMAScript 5 ma ustawione "configurable" na wyłączone (false). Jak włączyć "configurable" dla istniejących właściwości, np. CSS, tak żeby można było je modyfikować z poziomu JavaScript? Jak utworzyć nowy modyfikowalny obiekt (z configurable: true) , to wiem, ale chodzi o to, jak odblokować konfigurowanie już istniejących (wbudowanych) właściwości, np. CSS? I nie chodzi tylko o właściwości CSS, bo ta blokada (configurable: false) dotyczy wielu innych elementów DOM. Jak te ustrojstwo wyłączyć i przywrócić działanie z ECMAScript 3? Z góry dziękuję za odpowiedź. A poniżej kod, gdzie właśnie nie działa dodanie właściwości "height" dla IMG (8 wiersz licząc od góry):

Kod: Zaznacz cały
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>iGłaz - Twój wirtualny ulubieniec</title>
    <script>   
      function resizeRock() {
        document.getElementById('rockImg').style.height = (document.body.clientHeight - 100) * 0.9; // NIE DZIAŁA TA MODYFIKACJA DLA IMG - WŁAŚCIWOŚĆ CSS HEIGHT NIE JEST DO <IMG> DODAWANA, A POWINNA.
      }
    </script>
  </head>
    <body onLoad="resizeRock();" onResize="resizeRock();">
    <div style="margin:100px 0 0; text-align:center;">
      <img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer;" onClick="touchRock();">
    </div>
  </body>
</html>
Wielki_Elektronik
Posty: 2
Dołączył(a): 12.07.2017

Re: Jak odblokować modyfikację właściwości CSS

Post 12.07.2017, 20:13:30

Męki Tantalskie trzeba przechodzić naprawiając ten ich zrąbany kod (z tej ich książki). Omal mi, przez te ich amatorkę, łeb nie pękł, ale w końcu mi się udało i oto działający kod:

Kod: Zaznacz cały
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>iGłaz - Twój wirtualny ulubieniec</title>
    <script>   
      function resizeRock() {
        document.getElementById('rockImg').style.height = (window.innerHeight - 200)+'px'; // Teraz działa!
      }
    </script>
  </head>
  <body onLoad="resizeRock();" onResize="resizeRock();">
    <div style="margin:100px 0 0; text-align:center;">
      <img id="rockImg" src="rock.png" alt="iRock">
    </div>
  </body>
</html>
Wielki_Elektronik
Posty: 2
Dołączył(a): 12.07.2017


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 4 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50669 zarejestrowanych użytkowników.
Najnowszy użytkownik: searaoracle


Nasi użytkownicy napisali:

  • 936052 wiadomości
  • w 246709 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)