javascript - Hente position (css) med js - Udvikleren.dk

Tags: javascript

Bruger #14023 @ 22.07.08 14:41

Hejsa

Jeg har lavet et lille script til at hente x/y koordinater, for et element:

Kode

function fnGetOffset(objObject) {
	iLeft = 0
	iTop = 0
	
	while(objObject.tagName != "BODY") {
		alert(objObject.tagName + " (" + objObject.id + "/" + objObject.className + "): " + objObject.style.position)
		iLeft = iLeft + objObject.offsetLeft
		iTop = iTop + objObject.offsetTop
		objObject = objObject.parentNode
	}
	return [iLeft,iTop]
}

Jeg har et halvavanceret stylesheet, der tit gør brug af position: relative, til at positionere elementer absolut på elementet med relative, istedet for at skulle angive koordinater for hjørnet af browseren

Så for at undgå, at jeg får koordinater fra element til body, istedet for kun at få koordinater til et element med position: relative, ville jeg gerne tjekke om elementet har den style på sig, men jeg kan kun hente det ud med objObject.style, der kun giver mig inline style..

Så er der ikke en måde i js, at hente style ud, der kommer fra et stylesheet?

6 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #5789 @ 22.07.08 16:07

640

prøv på denne side at skrive følgende i adresse feltet :

Kode

javascript:s=document.getElementById("polylinkid2");window.alert(s.style.top);s.style.top = "12px";window.alert(s.style.top);

Bruger #10216 @ 23.07.08 19:05

4.283

Kode

	function getStyle(el,prop) {
		if(typeof el == 'string') {
			el = document.getElementById(el);
		}
		
		var styles;
		if(window.getComputedStyle) {
			styles = window.getComputedStyle(el,'');
		} else if(el.currentStyle) {
			styles = el.currentStyle;
		} else {
			styles = el.styles;
		}
		return styles[prop];
	}
	alert(getStyle('testEl','position'));

Med denne skulle du gerne kunne hente props fra externe stylesheets.

Bruger #5789 @ 22.07.08 16:03

640

window.alert(obj.style.top)

obj.style.top = "25px"; etc

left, right, bottom.

Men det kræver nok de er sat. Altså at de har egenskaben. Endten gennem CSS, eller Js.

/J

Indlæg senest redigeret d. 22.07.2008 16:03 af Bruger #5789

Bruger #10216 @ 22.07.08 18:35

4.283

Ellers tager det da ikke mange splitsekunder at skrive det.

Kode

function getOffsetToParent(node) {
    if(!node || !node.parentNode) {
        return null;
    }
    var pNode = node.parentNode;
    return [
        node.offsetLeft - pNode.offsetLeft,
        node.offsetTop - pNode.offsetTop
    ];
}

Bruger #5789 @ 23.07.08 00:48

640

Ellers tager det da ikke mange splitsekunder at skrive det.

Kode

function getOffsetToParent(node) {
    if(!node || !node.parentNode) {
        return null;
    }
    var pNode = node.parentNode;
    return [
        node.offsetLeft - pNode.offsetLeft,
        node.offsetTop - pNode.offsetTop
    ];
}

Med lidt skygklapper på, ja.. hvad hvis det ikke er parentnode der er relativt positioneret? - den må skulle iterere tilbage og finde nærmeste parentnode (style.position == relative), og ikkke bare første.

/JJ

Indlæg senest redigeret d. 23.07.2008 00:49 af Bruger #5789

Bruger #14023 @ 23.07.08 15:04

Tak for jeres hjælp, men det er ikke helt det jeg spørger efter

Scriptet virker, den henter det øvre element, der er positioneret til og henter offset left og top

Men for at scriptet virker 100%, så skal jeg stoppe scriptet før jeg når body, hvis jeg når til et relativt positioneret element.. men det kan jeg ikke læse via object.style.position, da den kun kan hente inline style (dvs. hvis det ikke kommer fra style-attributten, men fra et stylesheet)

Hente position (css) med js

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler