NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
John Ronald Reuel Tolkien
Člen
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
Člen
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
Člen
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

Člen
Avatar
Odpovídá na John Ronald Reuel Tolkien
: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

Člen
Avatar
Odpovídá na John Ronald Reuel Tolkien
: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.