Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Javascript:присвоение ширины объекта (https://javascript.ru/forum/events/22404-javascript-prisvoenie-shiriny-obekta.html)

tolian_27 18.10.2011 12:27
Javascript:присвоение ширины объекта
 
Есть <div id="div1"> <div id="div2"> первый имеет динамическую ширину взависимости от содержимого, необходимо 2-му установить ширину которую имеет 1-й.
Делаю так:
window.onload = function() {
	var div1 = document.getElementById("div1");
	var div2 = document.getElementById("div2");
	div2.style.width = div1.style.width + 'px';
}

или:
window.onload = function() {
	var div1 = document.getElementById("div1");
	var div2 = document.getElementById("div2");
	div2.style.width = div1.style.width;
}


не срабатывает, как правильно?

dmitriymar 18.10.2011 12:31
getComputedStyle
currentStyle для ие

Riim 18.10.2011 12:33
div2.style.width = div1.style.offsetWidth + 'px';

tolian_27 18.10.2011 12:45
не пойму, что то делаю не так что ли, вот код как есть(код в шапке):
<script type="text/javascript">
	window.onload = function() {
		var table_shadow = document.getElementById("table_shadow");
		var mainmenu = document.getElementById("mainmenu");
		table_shadow.style.width = mainmenu.style.offsetWidth + 'px';
		}
</script>

все ли верно? почему то не срабатывает, айдишники записаны верно, перепроверял

Riim 18.10.2011 12:48
tolian_27, выложи здесь пример.

tolian_27 18.10.2011 13:01
Уфф, там Joomla и макет почти сверстан (на локале), код очень большой, выкладываю код шапки, и кусок кода css, этого достаточно?

head:
<head>
	<jdoc:include type="head"/>
	<link href="/site/templates/tm/css/template.css" rel="stylesheet" type="text/css" media="all"/>
	<link href="/site/templates/tm/css/custom_modules.css" rel="stylesheet" type="text/css" media="all"/>
	<link href="/site/templates/tm/css/editor.css" rel="stylesheet" type="text/css" media="all"/>
	<link href="/site/templates/tm/css/colorbox.css" rel="stylesheet" type="text/css" media="all"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script src="http://localhost/site/templates/tm/js/jquery.colorbox.js"></script>
	<script>
		$(document).ready(function(){				
			$("a[rel='scheme1']").colorbox({transition:"fade"});
		});
	</script>
	<script type="text/javascript">
		window.onload = function() {
			var table_shadow = document.getElementById("table_shadow");
			var mainmenu = document.getElementById("mainmenu");
			table_shadow.style.width = mainmenu.style.offsetWidth + 'px';
		}
	</script>
	
	<!--[if (gte IE 6) & (lte IE 8)]>
		<link href="/site/templates/tm/css/ie.css" rel="stylesheet" type="text/css" media="all"/>
	<![endif]-->
	<!--[if IE 6]>
		<script type="text/javascript" src="/site/templates/tm/js/pngfix.js"></script>
	<![endif]-->
</head>


menu:
<ul class="menu" id="mainmenu">
	<li id="current" class="first active item1">
		<a href="http://localhost/site/"><span>Главная</span></a>
	</li>
	<li class="parent item2">
		<a href="/site/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=2"><span>Документация</span></a>
	</li>
</ul>
<table id="table_shadow"><tr><td></td><td></td></tr></table>


CSS:
Код:
.menu {
        height: 35px;
        padding: 0 20px;
        display: inline-block;
        *display: inline;
        *zoom: 1;       
        border: 0px red solid;
        position: relative;
        border-radius: 11px;
        -moz-border-radius: 11px;
        -webkit-border-radius: 11px;
        -khtml-border-radius: 11px;
        behavior: url(templates/tm/htc/PIE.php);

        background: url("../images/menu_bg.jpg") 0 0 repeat-x;
}
        .menu li {
                float: left;
                _display: inline;
                overflow: hidden;
                position: relative;
                text-align: center;
                border: 0px solid;
                background: url("../images/hormenu_separator.png") left 0 no-repeat;
        }
        .menu li.first {
                background-image: none;
        }
       
        .menu li.item7 {
                background: url("../images/stand_out_item.png") 0 0 no-repeat;
        }
        .menu li.item7.last {
                margin-right: -20px;
                padding-right: 20px;
        }
       
                .menu li a {
                        padding: 10px 12px 9px;
                        display: block;
                        font: 600 14px Myraid Pro, Helvetica, sans-serif;
                        color: #f2faff;
                        text-decoration: none;
                        border: 0px blue solid;
                }
                .menu li.first a {
                        padding-left: 0px;
                }
                .menu li.last a {
                        padding-right: 0px;
                }
                .menu li a:hover {
                        text-decoration: underline;
                }

                        /* submenu */
                        .menu li.parent ul {
                                padding-top: 2px;
                                display: none;
                                *text-align: left;
                                border: 0px solid red;
                                position: relative;
                                zoom:1;
                                z-index: 1000;

                        }
                        .menu li.parent:hover ul {
                                display: block;
                        }                               
                       
                        .menu li.parent ul li {
                                float: none;
                                display: block !important;
                                text-align: left;
                                overflow: visible;
                                border: 0px green solid;
                                background: url("../images/submenu_bg.jpg") 0 0 repeat;
                        }
                        .menu li.parent ul li.last {
                                border-radius: 0 0 8px 8px;
                                -moz-border-radius: 0 0 8px 8px;
                                -webkit-border-radius: 0 0 8px 8px;
                        }
                        .menu li.parent ul li a {
                                max-width: 117px;
                                *width: 117px;
                                padding: 4px 0 4px 8px;
                                font: 600 13px Myraid Pro, Helvetica, sans-serif;
                                color: #f2faff;
                                border: 0px blue solid;
                        }

                        /* submenu */

        #table_shadow {
                height: 20px;
                background: red;
        }

dmitriymar 18.10.2011 14:51
что ,в гугле слабо набрать названия функций для работы с вычисляемыми стилями? и получаемые результаты через алерт проверять или в фаербаге чтоб локализовать проблему?

Riim 18.10.2011 15:32
Я тупанул немного, style лишний:
table_shadow.style.width = mainmenu.offsetWidth + 'px';
alert(mainmenu.style.offsetWidth);
alert(mainmenu.offsetWidth);


а вообще, dmitriymar прав, изучай отладку хотя бы alert-ами, а то с тобой как с маленьким.


Часовой пояс GMT +3, время: 09:11.