如何在我的页面末尾添加带有一些 css 样式的 HTML <style>标签之前 </body>

Question

我想在</body>之前的页面末尾添加一个HTML<style>标签，并使用纯javascript。

var htm = { html : <style>.wrapper {color:red;}</style>}

<div class="wrapper">
<div class="tab blue">
<input id="tab-four" type="radio" name="tabs2">
<label for="tab-four">Label One</label>
<div class="tab-content">
</div>
</div>
</div>

Answer 1

您可以将appendChild与innerText:一起使用

var stlyings = '.wrapper { color :red }';
var style = document.createElement('style');
style.innerText  = stlyings;
document.getElementsByTagName('body')[0].appendChild(style);

<div class="wrapper">
<div class="tab blue">
<input id="tab-four" type="radio" name="tabs2">
<label for="tab-four">Label One</label>
<div class="tab-content">
</div>
</div>
</div>

Answer 2

您可以使用insertAdjacentHTML方法来使用beforeeend位置。

document.body.insertAdjacentHTML('beforeend', '<style>.tab-content { color: #bada55; background: black; }</style>');

<div class="wrapper">
<div class="tab blue">
<input id="tab-four" type="radio" name="tabs2">
<label for="tab-four">Label One</label>
<div class="tab-content">Test styling from vanilla JS
</div>
</div>
</div>

Answer 3

var css = '.wrapper {color:red;}',
body = document.body || document.getElementsByTagName('body')[0],
style = document.createElement('style');
body.appendChild(style);
style.appendChild(document.createTextNode(css));