Question

这是我的网站http://natjecanje.interes.hr/

我在javascript中使用此代码：

function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);

，这在html中：

<li><a href="#" onclick="swapStyleSheet('css/kontrast.css')">KONTRAST</a></li>

这改变了我的网站的对比，当我点击它时这个链接有效，但是当我改变对比度时，我希望相同的链接支持我的网站的原始风格，任何人都可以帮助我吗？感谢!!!

Answer 1

function swapStyleSheet(sheet) {
    var oldPageStyle = document.getElementById('pagestyle').getAttribute('href');
    document.getElementById('pagestyle').setAttribute('href', sheet);
    document.getElementById('myContrastLink').setAttribute('onclick', "swapStyleSheet('" + oldPageStyle + "')");
}

HTML：

<li><a href="#" id="myConstratLink" onclick="swapStyleSheet('css/kontrast.css')">KONTRAST</a></li>

Answer 2

试试这个

function swapStyleSheet(){
   original = 'css/stil.css';
   contrast = 'css/kontrast.css';
   var source = document.getElementById('pagestyle').getAttribute('href');
   if(source == original)
      document.getElementById('pagestyle').setAttribute('href', contrast);
   else
      document.getElementById('pagestyle').setAttribute('href', original);  

}

HTML

<li><a href="#" Class="Normal" onclick="swapStyleSheet()">KONTRAST</a></li>

Answer 3

将工作表存储在函数本身内，并检查工作表是否已被交换，以确定新值是什么。

function swapStyleSheet (){
    var originalStyle = 'css/kontrast.css';
    var newStyle = 'css/original.css'; // <- or whatever your filename is
    var pagestyle = document.getElementById('pagestyle');

    if (pagestyle.getAttribute('href') == newStyle) {
       pagestyle.setAttribute('href', originalStyle);
    }
    else {
       pagestyle.setAttribute('href', newStyle);
    }

    pagestyle.setAttribute('href', styleToUse);
}

在你的HTML中，不要将任何内容传递给swapStyleSheet：

<li><a href="#" onclick="swapStyleSheet()">KONTRAST</a></li>

Answer 4

function swapStyleSheet(){
   original = 'css/stil.css';
   contrast = 'css/kontrast.css';
   var source = document.getElementById('pagestyle').getAttribute('href');
   if(source == original)
      document.getElementById('pagestyle').setAttribute('href', contrast);
   else
      document.getElementById('pagestyle').setAttribute('href', original);  

}

这对我有用，谢谢@Think Different

感谢大家为我们付出的时间，你们很棒，我是JS的新手：）

Answer 5

如果您正在使用Jquery您可以在Jquery中使用toggleClass函数。而是改变整个CSS，你可以改变特定的类并做相关的事情。

<强> HTML

<li><a href="#" Class="Normal" onclick="swapStyleSheet('css/kontrast.css')">KONTRAST</a></li>

<强> Jquery的

$("a.Normal").click(function() {
  $(this).toggleClass( "kontrast" );
 });

Javascript html每隔一次点击更改网址

5 个答案: