如何将CSS样式插入值=＆＃34;＆＃34;？

Question

我所做的是尝试使用<form>标记将CSS属性传递到新的HTML页面。

所以我有这个代码：

＆＃13;

＆＃13;

#a {
  font-size: 40px;
}

＆＃13;

<form action="newpage.html" method="GET" target="_parent">
  <input type="hidden" name="fontsize" id="fontsize" value="font-size property of #a here" />
  <button>CONTINUE</button>
</form>

＆＃13;

＆＃13;

＆＃13;

如何将font-size的{​​{1}}传递给#a代码的value属性？

Answer 1

您可以使用getComputedStyle来获取元素的所有CSS属性的值。然后，您可以使用getPropertyValue获取您要查找的属性的值。现在您只需将值传递给输入字段的值。

以下是一个例子：

＆＃13;

＆＃13;

var form = document.querySelector('form');

form.addEventListener('submit', function(e) {
  var el = document.getElementById('a'),
      style = window.getComputedStyle(el),
      fontSize = style.getPropertyValue('font-size');
  this.querySelector('input[name="fontsize"]').value = fontSize;
  console.log(fontSize)
  e.preventDefault()
})

＆＃13;

#a {
  font-size: 40px;
}

＆＃13;

<div id="a">Hello</div>
<form action="newpage.html" method="GET" target="_parent">
  <input type="hidden" name="fontsize" id="fontsize" value="" />
  <button>CONTINUE</button>
</form>

＆＃13;

＆＃13;

＆＃13;