Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery/css] Błędny odczyt rozmiarów czcionki.
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
starach
Witam,

Zrobiłem sobie prosty skrypt do zmieniania rozmiarów czcionki.
[JAVASCRIPT] pobierz, plaintext
  1. function Font(){}
  2. Font.resize = function($Object, $iSize)
  3. {
  4. $Object.css('font-size', parseInt($Object.css('font-size')) + $iSize);
  5. }
[JAVASCRIPT] pobierz, plaintext


Problem polega na tym że jQuery błędnie odczytuje mi jej rozmiar. W arkuszu stylów ustawione mam font-size:12px;, a jQ odczytuje że czcionka ma 14px. Kiedy ustawię czcionkę na w CSS na 14px to odczytuję mi że ma ona 17px... że tak potocznie zapytam... WTF !? :|
erix
Pokaż CSS dla tej strony.
starach
Eeee, ale co ma CSS do wiatraka, znaczy JavaScriptu? worriedsmiley.gif

  1. #content-wrapper { position:absolute; top:120px; left:7px; width:724px; }
  2. #content-wrapper .top { width:100%; height:8px; background:url('/images/Content/top.png') no-repeat; }
  3. #content-wrapper .center { float:left; padding:15px 0; background:url('/images/Content/center.png') repeat-y; }
  4. #content-wrapper .center .text { float:left; padding:0; margin:0 30px; font-size:12px; }
  5. #content-wrapper .bottom { float:left; width:100%; height:80px; background:url('/images/Content/bottom.png') top left no-repeat; }


p.s.
Przejrzałem kod jQ i wyciągnąłem z niego kod odpowiedzialny za manipulację stylami. Próbowałem też dobrać się do prawdziwej wartości przez document.getElementById().style i efekt jest taki sam. Na każdej przeglądarce. Oczywiście wiem jak to obejść ( ustawiając na sztywno rozmiar przez JS... :/ ), ale ciekawi mnie to dziwne zachowanie.

Pozdrawiam.
erix
Cytat
Eeee, ale co ma CSS do wiatraka, znaczy JavaScriptu?

Ma, wbrew pozorom - bardzo dużo. Chodzi o dziedziczenie wartości, jeśli rozmiary czcionek nie są ustalane poprzez wartości absolutne. Dlatego pytam o PEŁNY CSS.
starach
  1. body { margin:0; padding:0; font-family:"Verdana", "Georgia", "Arial"; font-size:11px; color:#DDD; background-color:#000; }
  2. img { border:0; }
  3.  
  4. #wrapper { position:relative; margin:0 auto; width:738px; }
  5. #header { position:relative; width:100%; height:424px; background:url('/images/Background.jpg') no-repeat; }
  6. #header ul { position:relative; top:62px; left:250px; width:489px; height:38px; margin:0; padding:0;
  7. list-style:none; background:url('/images/Menu.png') no-repeat; }
  8. #header ul li { float:left; margin:11px 0 5px 30px; }
  9. #header ul li.first { margin-left:20px; }
  10. #header ul li a { display:block; height:13px; }
  11. #header .logo { position:absolute; top:20px; left:0; width:237px; height:91px; background:url('/images/Logo/pl.png') no-repeat; }
  12.  
  13. #content-wrapper { position:absolute; top:120px; left:7px; width:724px; }
  14. #content-wrapper .top { width:100%; height:8px; background:url('/images/Content/top.png') no-repeat; }
  15. #content-wrapper .center { float:left; padding:15px 0; background:url('/images/Content/center.png') repeat-y; }
  16. #content-wrapper .center .text { float:left; padding:0; margin:0 30px; font-size:12px; }
  17. #content-wrapper .bottom { float:left; width:100%; height:80px; background:url('/images/Content/bottom.png') top left no-repeat; }
  18.  
  19. #footer { position:fixed; bottom:0; left:0; width:100%; height:35px; background:#333; border-top:1px solid #555; }
  20. #footer .wrapper { position:absolute; width:100%; height:100%; overflow:hidden; } /* border:1px solid #F00; } */
  21. #footer .wrapper-left { float:left; position:relative; top:50%; height:1em; } /* border:1px solid #0F0; } */
  22. #footer .wrapper-center { float:left; position:relative; top:50%; left:50%; height:1em; } /* border:1px solid #0F0; } */
  23. #footer .content { float:left; position:relative; height:100%; line-height:0.7em; color:#FFF; } /* border:1px solid #00F; } */
  24. #footer .wrapper-left .content { top:-50%; left:0; }
  25. #footer .wrapper-center .content { top:-50%; left:-100%; }
  26.  
  27. #footer .content ul.lang { float:left; margin:0 20px 0 0; padding:0; list-style:none; }
  28. #footer .content ul.lang li { float:left; padding:0; margin:0 0 0 10px; line-height:1px; }
  29. #footer .content ul.lang li a { padding:0; margin:0; }
  30. #footer .content ul.lang li a img { padding:0; margin:0; }
  31. #footer .content ul.font-controll { position:relative; bottom:130%; left:70px; margin:0; padding:0; list-style:none; }
  32. #footer .content ul.font-controll li { float:left; margin-left:5px; padding-bottom:1em; }
  33. #footer .content ul.font-controll li a { color:#FFF; padding:0.2em; border:1px solid #000; text-decoration:none; background:#222; }
  34. #footer .content ul.font-controll li a:hover { background:#444; }
1010
A nie psuje Ci wartości parseInt? Próbowałeś alertować sprawdzoną wartość przed ParseInt?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.