[英]Apply Theme/Dynamic CSS to a Page/any HTML Element
At some point, Users might get bored of the Style/Theme
of the WEB applications
. 在某些时候,用户可能会厌倦
WEB applications
的Style/Theme
。
They might think, " Only If I could make it look the way I like it " 他们可能会想,“ 只有我能让它看起来像我喜欢的样子 ”
example : 例如 :
My need : 我的需要 :
Not just change the class attribute but the complete CSS definition itself. 不仅要更改类属性,还要更改完整的CSS定义本身。
If we force the users to select from a set of Stylesheets, that would be constricting them to a small space, So I like to avoid that. 如果我们强制用户从一组样式表中进行选择,那将会将它们限制在一个小空间内,所以我想避免这样做。
* Note * I need it in pure javascript not using any jquery plugin or any jquery script *注意*我需要在纯javascript中不使用任何jquery插件或任何jquery脚本
You Can Try This Its Pure Javascript 你可以试试这个纯粹的Javascript
<script>
function applyit()
{
var ref = document.querySelector("#divel");
var bdy = document.getElementsByTagName("body")[0];
var style = (bdy.querySelector("#thm") || document.createElement("style"));
style.setAttribute("id","thm");
var reqCSS = prompt("Enter the CSS Body","color:#AA5533;");
style.innerHTML = ".cus{"+reqCSS+"}";
bdy.appendChild(style);
ref.setAttribute("class","cus");
}
</script>
<style> .def { color:#0000FF; } </style>
<div id="divel" class="def">
<h3>This is a heading in a div element Which Has The Color Change</h3>
<p>This is p tag in a div element Which Has The Color Change.</p>
</div>
<p onclick="applyit();">Click Here To Change The Color For Heading and p tag.</p>
Note: We could store the User Preferred style in browserStorage/Server to improve UserExperience 注意:我们可以将用户首选样式存储在browserStorage / Server中以改善UserExperience
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.