如何根据值动态更改页面的CSS？
如何根据值动态更改页面的CSS？
提问于 2014-03-20 11:05:04
我们有一个SharePoint站点。我们通过javascript在MasterPage上获取一个值，这取决于我们想要更改CSS文件的值。
例子：-
假设value =1，然后将CSS文件引用更改为CSS1.css (将站点颜色改为红色)
假设value =2，然后将CSS文件引用更改为CSS2.css (将站点颜色变为绿色)
这个是可能的吗？有什么推荐信吗？
代码：
<script type="text/javascript">
var clientContext = null;
var web = null;
ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");
function Initialize()
{
clientContext = new SP.ClientContext.get_current();
web = clientContext.get_web();
this.list = web.get_lists().getByTitle("Images");
clientContext.load(list, 'Title', 'Id');
clientContext.executeQueryAsync(Function.createDelegate(this, this.onListLoadSuccess),
Function.createDelegate(this, this.onQueryFailed));
}
function onListLoadSuccess(sender, args) {
alert("List title : " + this.list.get_title() + "; List ID : "+ this.list.get_id());
if (this.list.get_title()="new site")
{
here I need to apply CSS1
}
else
{
apply CSS2
}
}
function onQueryFailed(sender, args) {
alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
}</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-03-20 11:25:20
因此，如果您正在计划切换样式表，您将在页面的某个位置加载一个样式表，如下所示：
<link rel="stylesheet" id="css-placeholder" type="text/css" href="default.css"/>使用此JS：
var stylesheet = document.getElementById('css-placeholder');
if (this.list.get_title()="new site") {
stylesheet.href = "css1.css"
} else {
stylesheet.href = "css2.css"
}Stack Overflow用户
发布于 2014-03-20 11:31:25
您可以按照LShetty提供的方式来做，也可以通过更改身体的className：
<!DOCTYPE HTML>
<html>
<head>
<title>Bla!</title>
<style type='text/css'>
body.red { background-color:red; color:green }
body.red > div { border-style:solid; border-color:yellow; }
body.blue { background-color:green; color:red }
body.blue > div { border-style:solid; border-color:blue; }
</style>
<script type='text/javascript'>
function SetStyle (value) {
document.getElementById('body').className = value;
}
</script>
</head>
<body class='body' id='body' >
Some content here
<div> Some coneten here too</div>
<select onchange='SetStyle(this.value);'>
<option value='red'> Red Style </option>
<option value='blue'> Style Blue </option>
</select>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22530973
复制相关文章
相似问题
腾讯云开发者
