Java týden Java týden
Aprílový black friday tě nenechá v klidu! Až 80 % prémiového obsahu zdarma. Více informací
Pouze tento týden slevy až 80 % na programování v Javě

Diskuze: basic

JavaScript JavaScript basic American English version English version

Aktivity (1)
Avatar
John Ronald Reuel Tolkien:22.5.2018 19:39

Zdravím,
naprosto nechápu proč to nefunguje...

<!DOCTYPE html>
<html lang='cs'>

  <body>
   <script>
      window.onload=function()
      {

      var sirka=document.getElementById("div1").style.width;
      alert(sirka);
        }

      </script>
      <div id="div1" class="a">
          dsa
      </div>
      <div id="div2" class="a">
          as
      </div>
      <div id="div3" class="a">
         das
      </div>

      <style>
      #div1, #div2
      {
      border:2px solid black;
      width:350px;
      height:20px;

      }
      #div3
      {
      border:2px solid black;
      width:200px;
      height:20px;

      }

      </style>

  </body>
</html>

Je tam chyba, nebo je to jen nějaký zásek ?

Editováno 22.5.2018 19:41
 
Odpovědět 22.5.2018 19:39
Avatar
Jurajs
Člen
Avatar
Odpovídá na John Ronald Reuel Tolkien
Jurajs:22.5.2018 20:18

Pokud to má vypisovat jen sirku, tak to zkus udělat takhle:

var w = 100;
sirka = document.getElementById("ctverec");
sirka.style.width = w;
alert(w);

// A nebo takhle, tohle je tvuj priklad
var w = 100;
document.getElementById("ctverec").style.width = w;
alert(w);
Editováno 22.5.2018 20:21
 
Nahoru Odpovědět 22.5.2018 20:18
Avatar
John Ronald Reuel Tolkien:22.5.2018 20:31

Ne to ne, akorát to vypíše velikost té proměnné w.

 
Nahoru Odpovědět 22.5.2018 20:31
Avatar
Jurajs
Člen
Avatar
Odpovídá na John Ronald Reuel Tolkien
Jurajs:22.5.2018 21:06

A co teda? Nějak nechápu?
Pokud chceš měnit šířku v JS pomocí proměnné, tak ten(dejme tomu čtverec) musíš vytvořit pomocí JS a ne v CSS...
Všechny hodnoty co jsi mu nastavil v CSS, nastavíš v JS...Záleží o co ti vlastně jde? Nějak teď nechápu čeho chceš docílit? :) :)

Editováno 22.5.2018 21:09
 
Nahoru Odpovědět 22.5.2018 21:06
Avatar
John Ronald Reuel Tolkien:22.5.2018 21:11

Nechci měnit proměnnou, chci jen vypsat šířku objektu, popřípadě uložit do proměnné. (V mém příkladu ji chci jen vypsat do alertu)

 
Nahoru Odpovědět 22.5.2018 21:11
Avatar
Jurajs
Člen
Avatar
Odpovídá na John Ronald Reuel Tolkien
Jurajs:22.5.2018 21:17

Myslis nejak takhle?

//pouzil jsem jen HTML  a JS  :)
var w = 100;
var h = 100;

var c = document.getElementById("ctverec");
c.style.background= "blue";
c.style.width = w + "px";
c.style.height = h + "px";
alert(w);
c.appendChild();
Editováno 22.5.2018 21:18
 
Nahoru Odpovědět 22.5.2018 21:17
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23.5.2018 7:46

To je slozitejsi problem.


document.getElementById("div1").style.width

Tohle funguje, pokud existuje <id="div1" width="123">


document.getElementById("div1").style.offsetWidth

Tohle by melo byt univerzalnejsi. Ale muze to sirku spatne pocitat pro marginy nebo paddingy. Nevim jesli oboje nebo jen jedno z toho.


<style>

To jsem nikdy nepouzil. Ale da se k tomu nejak dostat.


Vykopirovane kousky kodu z ruznych stranek...
google = javascript get width from style tag

document.getElementById('banner-contenedor').clientWidth

w=this.offsetWidth

window.getComputedStyle(elem).width

function getInnerWidth(elem) {
    var style = window.getComputedStyle(elem);
    return elem.offsetWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - parseFloat(style.borderLeft) - parseFloat(style.borderRight) - parseFloat(style.marginLeft) - parseFloat(style.marginRight);
}

$("#banner-contenedor").css('width'); // jquery

yourItem.style['cssProperty']
Editováno 23.5.2018 7:48
 
Nahoru Odpovědět 23.5.2018 7:46
Avatar
Odpovídá na John Ronald Reuel Tolkien
Vladislav Ladicky:23.5.2018 9:09

Tiež som sa s tým kedysi natrápil. Nepamätám si už vysvetlenie, že prečo je to tak, ale proste nemôžeš čítať element.style­.width, ale iba element.width, bez style. A pri zápise zasa nemôžeš meniť element.width, ale meniť to už musíš so style, napríklad element.style.width = 32 + 'px'.

 
Nahoru Odpovědět 23.5.2018 9:09
Avatar
Odpovídá na John Ronald Reuel Tolkien
Vladislav Ladicky:23.5.2018 9:16

Jo. A ak ťa však zaujíma nie šírka elementu, ale pridelený štýl v <style> , musíš to čítať cez getComputedStyle. Aj s príkladmi to máš vysvetlené na MDN: https://developer.mozilla.org/…omputedStyle

 
Nahoru Odpovědět 23.5.2018 9:16
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23.5.2018 14:59

Ono je to zpusobeno tim, jak to prohlizec renderuje. On neco dava primo na screen a neco do javascriptoveho element-stromu. Neni vsude vsechno. js - jquery je v tomhle vic univerzalnejsi. Cili, cely problem by bylo mozne vyresit i pres jquery.

 
Nahoru Odpovědět 23.5.2018 14:59
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.