Question

html中有一个div如下：

<svg id="box" width="312" height="101"></svg>

我想获得svg标签的宽度和高度：

var el = window.document.querySelector('#box');

但我无法通过el得到宽度和高度，我如何得到它们？我使用node.js来运行脚本。整个代码是：

var jsdom = require('jsdom'),
content = '<svg id="box" width="300" height="120"></svg>';

jsdom.env({ features : { QuerySelector : true }, html : content,
      done : function(errors, window) {
      var w =  window.document.querySelector('#box').attr("width");
      console.log(w);
     }
});

Answer 1

var myelm = document.getElementById("box").getAttribute('width');

Answer 2

使用getBoundingClientRect()的well-supported：

Element.getBoundingClientRect（）方法返回一个的大小元素及其相对于视口的位置。

var node = document.getElementById("yourElement");
var rect = node.getBoundingClientRect();

console.log("width:" + rect.width );
console.log("height:" + rect.height);

如何从svg div获得js的宽度和高度

2 个答案: