PL
JavaScript - rozmiar dopełnienia elementu w Vanilla JS
0
points
W tym krótkim artykule chcielibyśmy pokazać, jak uzyskać bieżące wypełnienie elementu za pomocą JavaScript.
Przedstawione poniżej przykłady zwracają dopełnienie w pikselach - w stylach zastosowano nawet inną jednostkę.
Szybkie rozwiązanie:
var element = document.querySelector('#my-element');
var style = element.currentStyle || window.getComputedStyle(element);
console.log(parseInt(style.paddingLeft));
console.log(parseInt(style.paddingTop));
console.log(parseInt(style.paddingRight));
console.log(parseInt(style.paddingBottom));
1. Przykład aktualnej właściwości stylu
Takie podejście pozwala uzyskać aktualną wartość stylu (nawet została przypisana selektorem).
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
margin: 0;
height: 140px;
}
div {
/* 2em=32px */
padding: 2em 30px 40px 10px; /* [górny] [prawy] [dolny] [lewy] */
background: gray;
width: 100px; height: 100px;
}
</style>
</head>
<body>
<div id="my-element">Text...</div>
<script>
var element = document.querySelector('#my-element');
var style = element.currentStyle || window.getComputedStyle(element);
console.log('padding-left:' + parseInt(style.paddingLeft));
console.log('padding-top:' + parseInt(style.paddingTop));
console.log('padding-right:' + parseInt(style.paddingRight));
console.log('padding-bottom:' + parseInt(style.paddingBottom));
</script>
</body>
</html>
2. Przykład kodu wielokrotnego użytku
To podejście zorganizowało powyższy kod w funkcję wielokrotnego użytku.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
margin: 0;
height: 140px;
}
div {
padding: 20px 30px 40px 10px; /* [top] [right] [bottom] [left] */
background: gray;
width: 100px; height: 100px;
}
</style>
<script type="text/javascript">
function getPadding(element) {
var style = element.currentStyle || window.getComputedStyle(element);
var result = {
getLeft: function() {
return parseInt(style.paddingLeft);
},
getTop: function() {
return parseInt(style.paddingTop);
},
getRight: function() {
return parseInt(style.paddingRight);
},
getBottom: function() {
return parseInt(style.paddingBottom);
}
};
return result;
}
</script>
</head>
<body>
<div id="my-element">Text...</div>
<script>
var element = document.querySelector('#my-element');
var padding = getPadding(element);
console.log('padding-left:' + padding.getLeft());
console.log('padding-top:' + padding.getTop());
console.log('padding-right:' + padding.getRight());
console.log('padding-bottom:' + padding.getBottom());
</script>
</body>
</html>