Question

我们有一个SharePoint网站。我们通过javascript在MasterPage上获取值，具体取决于我们要更改CSS文件的值。

实施例： -

假设值= 1然后将CSS文件引用更改为CSS1.css（将网站颜色变为红色）

假设值= 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>

Answer 1

因此，如果您计划切换样式表，则可以在页面顶部的某处加载样式表，如下所示：

<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"
}

Answer 2

您可以像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>

如何根据值动态更改页面的CSS？

2 个答案: