Изменение внешнего отступа

@lipton_v · Регистрация: 20.03.2017

Author24 — интернет-сервис помощи студентам

Здравствуйте. Есть html страница, файлы css и js. Хочу, чтобы в зависимости от видимости любой из боковых панелей sidebar, изменялся правый отступ article классом content. Но этого не происходит. Хотя console.log выполняется правильно, свойство marginRight не меняется. Всегда 6vh.

about.html

HTML5

<link href="css/about.css" rel="stylesheet" type="text/css"/>
<nav id="menu">
    <ul class="right">
        <li class="in">1</li>
        <li class="log">2</li>
    </ul>
</nav>
<main>
  <sidebar class="in" ></sidebar>
  <sidebar class="log" ></sidebar>
  <article class="content show">Содержание 1</article>
  <article class="content">Содержание 2</article>
</main>
<script type="text/javascript" src="js/common.js" ></script>

about.css

CSS

main > article.content{
margin: 0 6vh 0 6vh;
}
 
sidebar{
position: absolute;
display: none;
}

common.js

Javascript

document.querySelector('li.in').onclick = function(){ 
    var block = document.querySelector('sidebar.in');
    if(block.style.display=='block')
        closeSidebars();
    else
    {
        closeSidebars();
        block.style.display='block';
    }
    tabContentPosition();
}
 
document.querySelector('li.log').onclick = function(){ 
    var block = document.querySelector('sidebar.log');
    if(block.style.display=='block')
        closeSidebars();
    else
    {
        closeSidebars();
        block.style.display='block'; 
    }
    tabContentPosition();
}
 
function closeSidebars(){
    var sbars = document.getElementsByTagName('sidebar');
    for(var i=0; i<sbars.length; i++){
        sbars[i].style.display='none';
    }
}
 
function tabContentPosition() {
    var tab_content = document.getElementsByClassName('content');
    var log_block = document.querySelector('sidebar.log');
    var in_block = document.querySelector('sidebar.in');
    if(tab_content.length != 0) {
        if(log_block.style.display=='block' || in_block.style.display=='block') {
            for(var i = 0; i < tab_content.length; i++) {
                tab_content[i].style.marginRight = 'calc(6vh+14.5em)'; 
                console.log('6vh+14.5em');
            }
        }
        else
            {
                for (var i = 0; i < tab_content.length; i++) {
                    tab_content[i].style.marginRight = '6vh';
                    console.log('6vh');
                }
 
            }
        }
 
}

@Lockground · 25.06.2018, 22:06

Я подозреваю,что дело в том,что вы пытаетесь сменить свойство, которого у вас нет.
Если вы уже меняете marginRight , то и в css классе должен быть margin-right (отдельно) ,а не margin (или меняйте только соответствующюю цифру). В противном случае вам при помощи js надо дописать это свойство в класс (так как его название дольше чем название свойства margin, по идее, должно сработать).

@Lockground 0 / 0 / 1 Регистрация: 12.12.2016 Сообщений: 32
	25.06.2018, 22:06	2
	Я подозреваю,что дело в том,что вы пытаетесь сменить свойство, которого у вас нет. Если вы уже меняете marginRight , то и в css классе должен быть margin-right (отдельно) ,а не margin (или меняйте только соответствующюю цифру). В противном случае вам при помощи js надо дописать это свойство в класс (так как его название дольше чем название свойства margin, по идее, должно сработать). 0