JS ne ucitava css vrednosti

JS ne ucitava css vrednosti 06.09.2016. u 13:23 · pre 123 meseca #1

Imam CSS npr.

Code:

#myid {
        position:absolute;
        height:315px;
        bottom:30px;
                width:45%;
        z-index:2;
        left:27.5%;
        border-radius:15px;
    }

Kada hocu da napisem JS funkciju onda ponovo moram da zadam CSS parametre da bih ta f-ja radila:
Napravim idiot f-ju za proveru kao npr.

Code:

    function proba() {
    var x= document.getElementById("myid").style.left ;
        if(x==null){
        alert("nema nista");
        }
            else {
            alert(x);
            }
    }

Meni alert metoda u ovom primeru vrati tekst "nema nista" sve dok ne definisem style left u js-u izmedju script tagova i to u bodiju

Code:

document.getElementById("myid").style.left = "27.5%";

Cemu mi sluzi css ako moram da ponovo u JS-u definisem css vrednosti ??????? U cemu je problem.
VRV idiot pitanje,ali me neznanje odgovora iritira jer sam pocetnik u js-u.
Hvala unapred.

Re: JS ne ucitava css vrednosti 07.09.2016. u 14:42 · pre 123 meseca #2

Ti pokušavaš da proveriš da li određeni element ima inline style, a ne eksterno (fajl ili glava dokumenta) css pravilo izdefinisano, a pravilo koje ti treba inače - nije nakačeno kao vrednost style atributa..

Ovako ima više logike ..

Code (javascript):

function proba() {

 var x = document.getElementById('myid');

 alert( (!x.hasAttribute('style')) ? 'Nema nista' : x );

}

Ovo :

Code (javascript):

 
 element.style.property

... jeste za inline stil, DOM/html direktno dakle.
Ako hoćeš da proveravaš da li css pravila za određeni element postoje, ali ne kroz atribut ciljanog elementa, tu ide totalno drugačiji pristup.

ps: upali konzolu (element inspector) i koristi console.log ili console.info umesto alert

Code (javascript):

console.log(myVar);

// ili

console.info(myVar);

Potpis

about:networking

1

Re: JS ne ucitava css vrednosti 08.09.2016. u 00:04 · pre 123 meseca #3

plus_minu hvala na odgovoru.

Zapravo ja hocu css vrednost da koristim samo nisam hteo da budem preopsiran.
Treba mi za npr

Code:

document.getElementsByTagName("img")[i].style.left = (parseInt(document.getElementsByTagName("img")[i].style.left)) + "px";

Malo mi je nelogicno da ponovo vrednosti css svojstva definisem u js-u ako sam ih definisao u css-u.

Re: JS ne ucitava css vrednosti 08.09.2016. u 00:56 · pre 123 meseca #4

Inline css stil kroz atribut (html) i (čist) css stil nisu isto ... bar ne za javaskriptu.
Razlika je takođe u tome što inline css ima najveći prioritet, ali to je neka druga priča ...

Sve u svemu, gledaš da li element ima style atribut ... ( element.hasAttribute() )
pa, ako ima atribut, znači da je inline pravilo tu..
pa, ako je inline pravilo prisutno ... .... ovaFunkcija() .. a ako nije ... ... .. ovaDrugaFunkcija() ( ili jedna funkcija na osnovu argumenata .. )

itd, itd..

Postoji i native JS API za manipulaciju, ne inline stilova, nego definisanih css pravila, ali čini mi se da neće svi pretraživači da "pozdrave" taj API kako treba, još uvek.
Nije dakle standard..

Document.styleSheets - Web APIs | MDN

Potpis

about:networking

Re: JS ne ucitava css vrednosti 08.09.2016. u 01:23 · pre 123 meseca #5

Da dodam..

Ovaj tvoj primer gore.. parseInt() ... dobićeš NaN .. NOTaNUMBER vrednost, ako se ne varam.
Jer element.style.left daje i "px" .. ne samo procente i brojke..

Dakle, ono što će javaskripta da skonta na kraju jeste... "NaNpx"

A i samo dodeljivanje vrednosti .. na postojeću vrednost.. u tvom primeru, meni deluje kao da je u potpunosti nepotrebno..

Nije li ovo dole, otprilike ono što tebi treba?

Code (javascript):

var i=0, loopImage = document.getElemenstByTagName('img'), ii = loopImage.length;

for (i;i<ii;i++) loopImage[i].style.left = '37.5%'; // Ako je vrednost za taj element u css stilu drugačija, jel' da?

Nema potrebe za parseInt() uopšte ..
Pretpostavljam da hoćeš da dinamički mrdaš slike (slajdšou ili tako nešto) ...
I isto tako pretpostavljam da imaš css koji se ne slaže sa html delom kako treba, pa te još i to keca ..

Moraš ako si nov, mnogo da čitaš i da vežbaš .. neko vreme .. koje nadam se, neće dugo da traje ..
E, a posle ćeš jako malo da čitaš (da se podsetiš) i da raduckaš to što imaš..
.. eventualno, povremeno da proveriš da li je dokument validan .. da li su tagovi i atributi na svom mestu i da li svaki tag ima samo one atribute koje i podržava ..

Potpis

about:networking

Forum kao aplikacija na telefonu

Srodne teme