尝试使用可通过按钮事件应用的CSS样式

目前我正在学习网页设计和网站开发，并创建了一个网站，作为证明我在http//.www.ahandbuilt.website

（是的，我知道这看起来很乱，但我仍然在学习所学的手段它似乎我试图跑步之前，我可以走路）

在主页上，你会看到三个按钮，旨在提供点击更改页面。

前两个按钮的设计使主页可以在应用CSS样式或应用CSS样式的情况下查看 - 以显示CSS对页面外观的影响。

在我的HTML文档的头，我有一个CSS链接标签如下：

<link rel="stylesheet" href="">

，并有一个样式名为handbuilt.css

因此，页面打开没有任何造型，但当点击适当的按钮时，它应该更新css链接的href值：

<link rel="stylesheet" href="handbuilt.css">

反之亦然。

问题是按钮不改变链接中的href。我会很感激任何指针。我没有完整的答案 - 只是一个指向我要出错的指针。

我正在使用的网站规则，意味着我只能使用直接的代码，没有框架。我目前的能力意味着我在HTML上工作得很舒服，可以使用CSS并且可以使用JavaScript。

任何意见或指针将不胜感激。

来源

2016-09-19 Andrew Brown

看起来像你工作！希望我的回答有帮助。 –

非常感谢您的建议。在测试和上传之前，我花了几天的时间学习了解错误的位置，并且还玩了其他按钮的onclick操作。 –

任何意见或指针将不胜感激。

尝试打开developer tools在您的浏览器（我在Firefox使用Firebug，但内置的开发工具也很棒），并期待在控制台输出，当你点击按钮。如果你还不熟悉开发工具，一定要检查一下。他们会让你的编码生活变得更容易。

我不是一个完整的答案 - 只是一个指针，我要去哪里错了。

当我看着我的Firebug控制台，同时点击按钮，我看到一个错误ReferenceError: myFunction is not defined。

看起来好像你在定义之前调用myFunction函数。浏览器不知道如何处理它，所以函数没有被执行。

可能还有其他问题，但我会先尝试让此函数实际执行。

来源

2016-09-19 14:47:26

非常感谢您的建议。在测试和上传之前，我花了几天的时间学习了解错误的位置，并且还玩了其他按钮的onclick操作。 –

使用jQuery需要：

$("link:first").attr('href',"handbuilt.css");

例如

<button onclick="$('link:first').attr('href','handbuilt.css');">Click to see page with Styling</button>

的JS需要给ID为链接元素。例如

<link rel="stylesheet" href="" id="styleid">

然后

document.getElementById("styleid").href = "handbuilt.css"

例如（这是在您的网站的工作）

<button onclick="document.getElementById('styleid').href = 'handbuilt.css'">Click to see page with Styling</button>

来源

2016-09-19 14:49:25 Rex

非常感谢您的建议。在测试和上传之前，我花了几天的时间学习了解错误的位置，并且还玩了其他按钮的onclick操作。 –

为了做到这一点，你需要使用JavaScript来动态地更新HTML你的页面的代码。你已经有一个JavaScript函数链接到您的按钮（myFunction0，你现在需要有相当的JavaScript代码来更新样式表

，你应该在你的标题是这样的：

<script type="text/javascript"> 
function myFunction(){ 
    //your code 
} 
</script>

你可以找到在这个功能here。什么就写一个想法，应该足以为您解决这个！

来源

2016-09-19 14:53:04 P13

非常感谢您的建议。在测试和上传之前，我花了几天的时间学习了解错误的位置，并且还玩了其他按钮的onclick操作。 –

Gald听到这些，保持良好的工作，你在正确的轨道:) – P13

考虑看看你的JavaScript功能，您使用的方法“的getElementById”正如我敢肯定你知道，你可以在HTML中为你的元素添加一个Id属性，这正是这个方法正在寻找。要验证，您可以打开您的开发人员工具（在Chrome中，您可以使用F12或右键单击并选择“检查”）。在开发人员工具中，有一个控制台，您可以在其中编写JavaScript，并将返回结果。这也是显示用console.log（）等记录的信息的地方。试着在控制台中添加一个Id并使用元素并使用'getElementById'方法来查看它返回的内容。

一旦你探索了这个，你可能想知道你可以在选择它之后用JavaScript修改元素的属性。一些自我探索或谷歌会告诉你如何做到这一点。这样，你可以修改正是您的链接将页面..

来源

2016-09-19 14:58:06 Gavin

非常感谢您的建议。在测试和上传之前，我花了几天的时间学习了解错误的位置，并且还玩了其他按钮的onclick操作。 –

@AndrewBrown：只需再次查看您的网站，我很高兴你的问题解决了。我知道这可能不是你现在正在寻找的东西，但如果你还没有，你一定要检查出jQuery。它非常强大。 – Gavin

HTML：

在头：

<link rel="stylesheet" href="./css/style1.css" id="styling">

在车身：

<button type="button" name="button" onclick="toggleCSS()"> Toggle CSS </button>

JS：

function toggleCSS() 
    { 
    var link = document.getElementById('styling'); 
    link.disabled = !link.disabled; 
    }

By t他的代码，我通过按钮事件启用和禁用CSS。简单！ :-)

来源

2017-06-26 12:21:31

尝试使用可通过按钮事件应用的CSS样式

回答

相关问题