document.getElementById().style.width

iillyyaa2 · June 8, 2011

<style>
#boxForLogin {
	width: 100px;
}
</style>

<div id="boxForLogin">dddd</div>

<script>
var xx = parseInt(document.getElementById('boxForLogin').style.width);
alert(xx);
</script>

не работает, но если прописать стиль сразу блоку, всё гуд

<div id="boxForLogin" style="width: 100px;">dddd</div>

<script>
var xx = parseInt(document.getElementById('boxForLogin').style.width);
alert(xx);
</script>

как мне получить размер в первом случае ? :dash:

всё, нашел.

var o = document.getElementById("id1");
   var sty = o.currentStyle || getComputedStyle (o, '');

alanvanduke · June 9, 2011

Здесь более развернуто.

Int · June 9, 2011

document.defaultView.getComputedStyle(this,'').getPropertyValue('display')

Вот, только надо заменить на свои значения

iillyyaa2 · June 9, 2011

document.defaultView.getComputedStyle(this,'').getPropertyValue('display')
Вот, только надо заменить на свои значения

твой не будет работать или в ие или в фф (не помню где), они блин по разному обрабатывают.. моя реализация работает везде

я сделал так:

var thisMyStyle = document.getElementById('boxForLogin');
thisMyStyle = thisMyStyle.currentStyle || getComputedStyle(thisMyStyle, null);
ww = parseInt(thisMyStyle.width);

Edited June 9, 2011 by iillyyaa2

Great Rash · June 9, 2011

Вот так правильно:


function getRealStyle(elem, name) {
	elem = typeof elem === 'string' ? document.getElementById(elem) : elem;

	if (elem.style == name) { // If this prop exist in "style" attribute
		return elem.style[name];
	} else if (elem.currentStyle) { // IE
		var re = /(\-([a-z]){1})/g;

		if (name == 'float') name = 'styleFloat';

		if (re.test(name)) {
			name = name.replace(re, function () {
				return arguments[2].toUpperCase();
			});
		}

		return elem.currentStyle[name] ? elem.currentStyle[name] : null;
	} else if (document.defaultView && document.defaultView.getComputedStyle) { // W3C
		var s = document.defaultView.getComputedStyle(elem, '');

		if (name == 'float') name = 'cssFloat';

		return s && s.getPropertyValue(name);
	} else {
		return null;
	}
}

alert(getRealStyle('boxForLogin', 'width'));

iillyyaa2 · June 9, 2011

а зачем так умно то ? ведь мой вариант вроде рабочий везде...

Great Rash · June 9, 2011

Ну попробуйте, скажем, узнать при помощи вашего варианта значение float или скажем border-left-width.

Вариант такой громоздкий из-за универсальности. Примерно так реализован метод .css() в jQuery.

iillyyaa2 · June 9, 2011

Ну попробуйте, скажем, узнать при помощи вашего варианта значение float или скажем border-left-width.
Вариант такой громоздкий из-за универсальности. Примерно так реализован метод .css() в jQuery.

с этим я согласен, у меня метод всего узнаёт цифровые значения... ширину, высоту, может что то ещё... не более..

пока у меня нет задач менять флоаты явой

Int · June 9, 2011

Мой вариант для FF подходит, проверял. Значит IE как обычно.

madmagpiekorge · December 2, 2012

Народ поправте меня если где накосячил... почему не работает?

<html>

<head>

</head>

<body>

<tr>

</tr>

</table>

function topd(obj,direction, a) {

clearInterval(window.z);

counter = 0;

z = setInterval(function () {

if (a ? parseInt(obj.style.height) < 10 : parseInt(obj.style.height) > 310) {

obj.style.height = parseInt(obj.style.height) + direction;

counter++;

} else {

clearInterval(z);

}

},

1);

}

var pad = document.getElementById('topdown');

pad.onclick = function () {

topd((document.getElementById('topmenu')), 1, true);

}

var pad = document.getElementById('topmenu');

pad.onmouseover = function () {

topd(this, -1, true); }

}

</script>

</body>

</html>

nerv · December 2, 2012

Ну попробуйте, скажем, узнать при помощи вашего варианта значение float или скажем border-left-width.

попробовал http://learn.javascript.ru/play/69ShO

Примерно так реализован метод .css() в jQuery.

css: function( elem, name, numeric, extra ) {
    var val, num, hooks,
        origName = jQuery.camelCase( name );

    // Make sure that we're working with the right name
    name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) );

    // gets hook for the prefixed version
    // followed by the unprefixed version
    hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];

    // If a hook was provided get the computed value from there
    if ( hooks && "get" in hooks ) {
        val = hooks.get( elem, true, extra );
    }

    // Otherwise, if a way to get the computed value exists, use that
    if ( val === undefined ) {
        val = curCSS( elem, name );
    }

    //convert "normal" to computed value
    if ( val === "normal" && name in cssNormalTransform ) {
        val = cssNormalTransform[ name ];
    }

    // Return, converting to number if forced or a qualifier was provided and val looks numeric
    if ( numeric || extra !== undefined ) {
        num = parseFloat( val );
        return numeric || jQuery.isNumeric( num ) ? num || 0 : val;
    }
    return val;
},

http://code.jquery.com/jquery-1.8.3.js

Edited December 2, 2012 by nerv

Great Rash · December 3, 2012

Подняли тему 2-х летней давности. Зачем? Зачем приводить тут код jQuery? Чтобы доказать, что я не прав? Во-первых, я написал, что метод работает примерно так же. Ясен пончик, что в jQuery все намного сложнее, т.к. учитываются еще и вендорные префиксы. Во-вторых, большая сать кода реализована все-таки не в .css(), а в .curCSS(). Ну и в-третьих, если уж тыкать меня носом в код jQuery, то надо было брать код двух летней давности - так было бы нагляднее.

nerv · December 3, 2012

Great Rash, не обратил внимания, что это некропостинг :rolleyes:

> Чтобы доказать, что я не прав? Во-первых, я написал, что метод работает примерно так же

не злись, я просто код привел )

Edited December 3, 2012 by nerv

Sign In

document.getElementById().style.width

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information