javascript: изменить позицию CSS по относительной сумме

Question

В основном, что я пытаюсь сделать, это каждый раз, когда JavaScript выполняется (по щелчку), значение CSS left для моего <div> уменьшает на 20%. Так, например, left начинается с 40%. При первом нажатии он должен стать 20%, а затем 0%, а затем -20% и т. Д. Я обновил свой код ниже:

FilmstripLeft = parseInt(document.defaultView.getComputedStyle(ul).left, 10)/4; 
ul.style.left = (FilmstripLeft - 20) + "%"; 

ul является <div> я получаю с помощью document.getElementById(). Этот код работает сейчас, но я не уверен в делении на 4 в конце первой строки. Я тестировал, что эта строка возвращала значение 160, прежде чем я добавлю / 4 в конце, хотя начальное значение составляет 40%. Я не уверен, что это потому, что оно возвращает значение в пикселях вместо процента, и в этом случае деление на 4 будет работать только, если left находится на 160px?

Answer 1

"влево" значение для моей Div descreases на 20%

No. По вашему объяснения, вы хотите, чтобы уменьшить его на 20 percentage points, а не на 20%.

getComputedStyle(ul).left

быть в курсе проценты даны в относительных единицах. При вычислении они преобразуются в абсолютную длину.

Вы можете получить доступ только голый процент как встроенного стиль

var target = document.getElementById("target"); 
 
document.querySelector('input').addEventListener('click', function() { 
 
    target.style.left = parseFloat(target.style.left) - 20 + '%'; 
 
});

#target { 
 
    position: relative; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: blue; 
 
}

<div id="target" style="left: 80%"></div> 
 
<input type="button" value="Click" />

Но вам не нужен сырой процент для того, чтобы вычитать 20 процентных пунктов. Вы можете использовать calc:

var target = document.getElementById("target"); 
 
document.querySelector('input').addEventListener('click', function() { 
 
    var current = getComputedStyle(target).left; 
 
    target.style.left = 'calc(' + current + ' - 20%)'; 
 
});

#target { 
 
    position: relative; 
 
    left: 80%; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: blue; 
 
}

<div id="target"></div> 
 
<input type="button" value="Click" />

Answer 2

getComputedStyle() не будет хорошо работать для ваших целей, потому что, по определению, возвращает значение стиля вычисляется в пикселях, а не относительный процент от первоначальной стоимости. Для того, чтобы вычислить, что «20%» использует вычисляемые стили, вам придется сделать это вручную, находя ширину родительского элемента, а затем с 20%, что:

function onClick(){ 
 
    var myElement = document.getElementById("inner"); 
 
    var leftValue = parseFloat(window.getComputedStyle(myElement).left); 
 
    
 
    var parentElement = myElement.parentElement; 
 
    var parentWidth = parseFloat(window.getComputedStyle(parentElement).width); 
 
    var twentyPercent = parentWidth * 0.20; 
 
    
 
    var newLeftValue = (leftValue - twentyPercent) + "px"; 
 
    
 
    myElement.style.left = newLeftValue; 
 
    updateStatus(); 
 
} 
 

 
function updateStatus(){ 
 
    document.getElementById("status").innerHTML = window.getComputedStyle(document.getElementById("inner")).left; 
 
} 
 

 
updateStatus(); 
 
document.getElementById("btn").addEventListener("click", onClick);

#outer { 
 
    width: 400px; 
 
    height: 20px; 
 
    background: #888; 
 
} 
 

 
#inner { 
 
    width: 20px; 
 
    height: 20px; 
 
    position: relative; 
 
    left: 80%; 
 
    background: red; 
 
}

<div id="outer"> 
 
    <div id="inner"></div> 
 
</div> 
 
<button id="btn">click me</button> 
 
<div id="status"></div>

оборотная сторона этого метода заключается в том, что он фиксирует left как значение пикселя вместо истинного процента родительского элемента, поэтому, если изменяется ширина окна/родителя, значение left не будет соответствовать должным образом.

Это проще, если значение left является встроенным HTML-стилем, а не стилем CSS, потому что вы можете получить его напрямую с помощью element.style, который считывает встроенное значение стиля HTML. Затем вы можете присвоить новое значение left как истинный процент, который будет обновляться, если изменяется ширина окна/родителя.

function onClick(){ 
 
    var myElement = document.getElementById("inner"); 
 
    // Note how #inner's left value is now inline instead of CSS 
 
    var leftValue = parseFloat(myElement.style.left); 
 
    
 
    var newLeftValue = (leftValue - 20) + "%"; 
 
    
 
    myElement.style.left = newLeftValue; 
 
    updateStatus(); 
 
} 
 

 
function updateStatus(){ 
 
    document.getElementById("status").innerHTML = document.getElementById("inner").style.left; 
 
} 
 

 
updateStatus(); 
 
document.getElementById("btn").addEventListener("click", onClick);

#outer { 
 
    width: 400px; 
 
    height: 20px; 
 
    background: #888; 
 
} 
 

 
#inner { 
 
    width: 20px; 
 
    height: 20px; 
 
    position: relative; 
 
    background: red; 
 
}

<div id="outer"> 
 
    <div id="inner" style="left: 80%"></div> 
 
</div> 
 
<button id="btn">click me</button> 
 
<div id="status"></div>

Так что, если возможно, поместите ваши стили инлайн вместо в CSS, потому что они легче получить доступ. Технически можно получить доступ к правилам стилей CSS, используя JavaScript, но очень запутанный, и я не рекомендую его, если вы новичок в веб-разработке.