Question

在我的网页中，我试图获得自定义滚动条。它工作正常。

现在我有一个主题按钮，允许用户选择黑色主题或白色主题。为此，我写了两个css文件，一个carbon.css和另一个quartz.css

当用户点击其中一个主题时，我正在使用以下功能更新css文件。

除滚动条外，我能正确看到所有更改。直到我将鼠标悬停在滚动条上，才发生css更改。

更清楚的是，假设我是黑色主题。我看到黑色滚动条。现在当我点击白色主题时，我看到我的所有背景，文字正确地改变为白色主题。但滚动条仍然保持黑色主题。将鼠标移动到滚动条后，它会将滚动条更新为白色主题。

我该如何解决这个问题？

谢谢！

Hey Anubav：这是我正在处理的代码，包括你的更改：

trail.html

  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <script   type="text/javascript" src="./jquery-1.7.1.min.js"></script>
  <link href="./carbon.css" rel="stylesheet" type="text/css" id="extCSSFile"/>
  <script type="text/javascript">
  $(document).ready(function() {
  function changeAndPaint(that){

        var filename = $(that).attr('data-href');

    $('#extCSSFile').attr('href',filename);
        var newfile = $('#extCSSFile');

        $('#extCSSFile').remove();
        $(that).css('display','none').height(); //<--this is the trick to repaint
        $(that).css('display','inherit');       


        var elem = $('<link href="" rel="stylesheet" type="text/css" id="extCSSFile"/>');
        $(elem).attr('href',filename);  
        $('head').append(elem);

    }

        $('#carbonTheme,#quartzTheme').on('click', function(){
                changeAndPaint($(this));
            }); 
            });
            </script>
   </head>
  <body>
 <ul id="nav">
    <li id="carbonTheme" data-href="./carbon.css">carbon Theme </li>
    <li id="quartzTheme" data-href="./quartz.css">Quartz Theme </li>
 </ul>      
  <div> 
           <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p><p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p><p>There are no results</p>
            <p>There are no results</p>

            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
           <p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p>


            </div>
            </body>
            </html>

carbon.css

body {
    font-family: Arial, Helvetica, sans-serif;      
    font-size:8.5pt;  
    width:inherit;
    min-width:100px;
    max-width:250px;
    margin:10px;
    background-color:#191919;
    color:white;    
}

 ul{height:1000px;}

 #carbonTheme, #quartzTheme{ 
 text-decoration:underline;
 color:blue;
  }
  ::-webkit-scrollbar {
    width: 12px;
 }

::-webkit-scrollbar-track {
 background-color:#aaa;
}

::-webkit-scrollbar-thumb {

  background-color:black;
}

quartz.css

body {
    font-family: Arial, Helvetica, sans-serif;      
    font-size:8.5pt;  
    width:inherit;
    min-width:100px;
    max-width:250px;
    margin:10px;

 }
  ul{height:1000px;}

  #carbonTheme, #quartzTheme{ 
  text-decoration:underline;
  color:blue;
 }
 ::-webkit-scrollbar {
 width: 12px;
 }

 ::-webkit-scrollbar-track {
  background-color:#333;
 }

  ::-webkit-scrollbar-thumb {

   background-color:white;
 }

Answer 1

要强制浏览器重新绘制完整的DOM，只需执行$("#body").offset().Top;（正文是为body标签添加ID以加速选择器）

您的任务的简单方法是向链接元素添加属性disabled="disabled"

在HEAD部分中包含LINK：

<link href="./carbon.css" rel="stylesheet" type="text/css" id="carbonCSS" />
<link href="./quartz.css" rel="stylesheet" type="text/css" id="quartzCSS" disabled="disabled" />

在链接下方包含脚本：

 <script   type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
            $('#nav li').on('click', function(){
                    objLink = document.getElementById($(this).attr("data-href"))
                    $("#carbonCSS , #quartzCSS").attr("disabled","disabled");
                    $("#body").offset().Top;  // Force Repaint
                    objLink.removeAttribute("disabled");
                }); 
        });
 </script>

完整的html页面可能如下所示：

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

  <link href="./carbon.css" rel="stylesheet" type="text/css" id="carbonCSS" />
  <link href="./quartz.css" rel="stylesheet" type="text/css" id="quartzCSS" disabled="disabled" />

   <script   type="text/javascript" src="./jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
            $('#nav li').on('click', function(){
                    objLink = document.getElementById($(this).attr("data-href"))
                    $("#carbonCSS , #quartzCSS").attr("disabled","disabled");
                    $("#body").offset().Top;
                    objLink.removeAttribute("disabled");
                }); 
        });
    </script>
   </head>
<body id="body">
 <ul id="nav">
    <li id="carbonTheme" data-href="carbonCSS">carbon Theme </li>
    <li id="quartzTheme" data-href="quartzCSS">Quartz Theme </li>
 </ul>      
  <div> 
           <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p><p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p><p>There are no results</p>
            <p>There are no results</p>

            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
           <p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p><p></p><p></p><p></p><p></p>
           <p></p>


            </div>
</body>
</html>

Answer 2

这个解决方案有一些奇怪的事情。正如@Quentin指出的那样，您不应仅将rel属性用于变量存储区域。您可能希望在href属性中使用css路径（因为您仍然返回false）或者为“黑色”或“白色”的每个链接设置class或id ”

最重要的是，当您只说$('link')时，您只是自动更改页面上第一个href元素的link。我会为您的主题id元素使用link attr，因此您始终知道您正在更改该元素（无论您是否在此之前添加其他链接）。

每次单击更改主题时，您的方法也会添加http请求。

我认为这将是您最好的解决方案：将所有样式放在同一个css表中，每个主题特定样式带有前缀class，然后{{1} toggleClass()（jQuery）来自html / blackTheme的元素。这将简化您的许多问题，并可能自动清除滚动条颜色问题。

这是一个fiddle希望能够说明这个想法。（为简单起见，我只用双向切换来完成这项工作。）

Answer 3

您需要删除并附加链接元素。

HTML文件

<html>
<head>
<title></title>
<link href="css.css" rel="stylesheet" type="text/css" id="extCSSFile"/>
<script src="jq.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('#bt,#wt').on('click', function(){

        $('#extCSSFile').attr('href',$(this).attr('data-href'));
        var newfile = file = $('#extCSSFile');
        $('#extCSSFile').remove();

        $('head').append($(newfile));
    });
    });
</script>
</head>
<body>
<ul id="nav">
<li id="bt" data-href="css.css">blackTheme</li>
<li id="wt" data-href="css2.css">whiteTheme</li>
</ul>
</body>
</html>

css.css文件

ul{height:1000px;}

#bt, #wt{ 
    text-decoration:underline;
    color:blue;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
  background-color:#aaa;
}

::-webkit-scrollbar-thumb {

    background-color:black;
}

css2.css

body{
    background-color:black;
    color:white;
}

ul{height:1000px;}

#bt, #wt{ 
    text-decoration:underline;
    color:blue;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
  background-color:#333;
}

::-webkit-scrollbar-thumb {

    background-color:white;
}

Answer 4

我相信我们在这里有一个胜利者。

这只是HTML文件代码; css文件可以是你想要的。

我希望它只有一个CSS方法。我也没有为此目的找到故意的重绘命令。我发现的一个使用了chrome扩展，很奇怪。但无论如何，重新绘制很容易，你所要做的就是摇晃绘制的DOM，你很高兴。

哦，我正在使用最新的canary build和jQuery;所以在你的代码中考虑它们。如果有什么不妥，请告诉我。

<link href="" rel="stylesheet" type="text/css" id="extCSSFile"/>

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){

function changeAndPaint(that){

    var filename = $(that).attr('data-href');

$('#extCSSFile').attr('href',filename);
    var newfile = $('#extCSSFile');

    $('#extCSSFile').remove();

    $(that).css('display','none').height(); //<--this is the trick to repaint
    $(that).css('display','inherit');       

    var elem = $('<link href="" rel="stylesheet" type="text/css" id="extCSSFile"/>');
    $(elem).attr('href',filename);  
    $('head').append(e);
}

    $('#bt,#wt').on('click', function(){
            changeAndPaint($(this));
        }); 
    });

Answer 5

我已经详细阐述了Scrimothy的解决方案（实际上在我阅读他之前写了我的答案，哎呀），我碰巧认为它非常灵活和高效。我不确定为什么他的优秀示例不适合您，但也许使用此处包含的webkit滚动条样式，您将能够缩小差距。

不是依赖重新绘制和多个css文件，而是使用jQuery在body标签上切换特定于主题的类，并使用特定于body.quartz ...和{{1的选择器将所有css放在一个文件中}}

在这个小提琴中查看：http://jsfiddle.net/crowjonah/Ajkjy/

脚本被提炼为：

body.carbon...

你的CSS看起来像这样：

$('body').addClass('carbon'); // apply the default theme
$('#carbonTheme').on('click', function(){
    $('body').removeClass('quartz');
    $('body').addClass('carbon');
});
$('#quartzTheme').on('click', function(){
    $('body').removeClass('carbon');
    $('body').addClass('quartz');
});

现在我承认有很多潜在的正当理由可能不适合您的目的（特别是如果你有大量的主题，并且每个都有大量独特的造型），但我认为如果你是小心并且可以定义一致的布局，如宽度和边距，独立于主题，这将节省您的HTTP请求（如Scrimothy所说），允许更快的加载时间，并防止你挂在rels的连接，删除和附加链接标签等。

Answer 6

其他解决方案都不适合我。我终于在webkit中使用了body滚动条来重绘：

$('body').hide();
$('body').get(0).offsetHeight;
$('body').show();

...如此处所示：http://www.eccesignum.org/blog/solving-display-refreshredrawrepaint-issues-in-webkit-browsers

编辑：上面的javascript会将滚动位置重置为页面顶部。

保持相同的滚动位置：

var scrollX = window.pageXOffset;
var scrollY = window.pageYOffset;
$('body').hide();
$('body').get(0).offsetHeight;
$('body').show();
window.scrollTo(scrollX, scrollY);

webkit滚动条不会充电，直到我在更改主题时将鼠标悬停在它上面

6 个答案: