Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- style x
- client 300x100
- offset 300x100
- stylex
- client300x100
- offsetundefinedxundefined
- "style" "x"
- "client" "0x0"
- "offset" "undefinedxundefined"
- <svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1">
- <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" />
- <circle cx="150" cy="50" r="40" stroke="black" stroke-width="1" fill="green" />
- <circle cx="250" cy="50" r="40" stroke="black" stroke-width="1" fill="blue" />
- </svg>
- var svg1 = document.getElementById('svg1');
- console.log(svg1);
- console.log('style', svg1.style.width + 'x' + svg1.style.height);
- console.log('client', svg1.clientWidth + 'x' + svg1.clientHeight);
- console.log('offset', svg1.offsetWidth + 'x' + svg1.offsetHeight);
- #svg1 {
- width: 300px;
- height: 100px;
- }
- var bBox = svg1.getBBox();
- console.log('XxY', bBox.x + 'x' + bBox.y);
- console.log('size', bBox.width + 'x' + bBox.height);
- var el = document.getElementById("yourElement"); // or other selector like querySelector()
- var rect = el.getBoundingClientRect(); // get the bounding rectangle
- console.log( rect.width );
- console.log( rect.height);
- var chart = document.getElementsByClassName("chart")[0];
- var width = chart.getClientRects()[0].width;
- var height = chart.getClientRects()[0].height;
- var heightComponents = ['height', 'paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'],
- widthComponents = ['width', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'];
- var svgCalculateSize = function (el) {
- var gCS = window.getComputedStyle(el), // using gCS because IE8- has no support for svg anyway
- bounds = {
- width: 0,
- height: 0
- };
- heightComponents.forEach(function (css) {
- bounds.height += parseFloat(gCS[css]);
- });
- widthComponents.forEach(function (css) {
- bounds.width += parseFloat(gCS[css]);
- });
- return bounds;
- };
- let div = document.querySelector("div");
- let style = getComputedStyle(div);
- let width = parseFloat(style.width.replace("px", ""));
- let height = parseFloat(style.height.replace("px", ""));
- let svg = document.querySelector("svg");
- let box = svg.getBBox(); // box.height, box.height
Add Comment
Please, Sign In to add comment