getcomputed style js
// This method return an object including all css properties of an object
// Code below moves an element with id = element to the right
// on every button click, assuming a position relative for element.
const button = document.querySelector("button");
const targetElement = document.getElementById("element");
button.addEventListener("click", moveRight);
function moveRight() {
const { left } = getComputedStyle(targetElement);
targetElement.style.left = parseInt(left) + 10 + "px";
}
getComputedStyle
let box = document.querySelector('.box');
let style = getComputedStyle(box);
let borderTopWidth = parseInt(style.borderTopWidth) || 0;
let borderLeftWidth = parseInt(style.borderLeftWidth) || 0;
let borderBottomWidth = parseInt(style.borderBottomWidth) || 0;
let borderRightWidth = parseInt(style.borderRightWidth) || 0;
Code language: JavaScript (javascript)
|