首页 文章

尝试通过onclick按钮事件应用CSS样式

提问于
浏览 次
0

我目前正在学习网页设计和网站开发，并创建了一个网站，作为展示我在http//.www.ahandbuilt.website学到的东西的一种手段

（是的，我知道它看起来很乱，但我还在学习，看起来我想跑步才能走路）

在主页上，您将看到三个按钮，用于为页面提供onclick更改 .

前两个按钮的设计使得主页可以应用CSS样式或应用CSS样式进行查看 - 作为显示CSS对页面外观的影响的一种方式 .

在我的HTML文档的头部，我有一个css链接标记如下：

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

并有一个 Headers 为handbuilt.css的样式表

因此，页面打开时没有任何样式，但是当单击相应的按钮时，它应该更新css链接的href值：

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

反之亦然 .

问题是按钮没有改变链接中的href . 我会感激任何指针 . 我不是在完整答案之后 - 只是指出我哪里出错了 .

我正在使用的网站规则，意味着我只能使用直接代码，没有框架 . 我现在的能力意味着我可以轻松地使用HTML，可以使用CSS并且可以使用JavaScript .

任何建议或指示将非常感激 .

css button hyperlink onclick stylesheet

5 回答

  • 0

    非常感谢任何建议或指示 .

    尝试在浏览器中打开developer tools（我在Firefox中使用firebug，但内置开发工具也很棒）并在单击按钮时查看控制台输出 . 如果你让你的编码生活更轻松 .

    我不是在完整答案之后 - 只是指出我哪里出错了 .

    当我在单击按钮的同时查看我的Firebug控制台时，我发现错误 ReferenceError: myFunction is not defined .

    看起来你在定义它之前调用了myFunction函数 . 浏览器不知道如何处理它，因此该功能未被执行 .

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

    回复于
  • 0

    为此，您需要使用javascript动态更新页面的HTML代码 . 你已经有一个链接到你的按钮的javascript函数（myFunction0，你现在需要包含正确的javascript代码来更新样式表 .

    你应该在 Headers 中有这样的东西：

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

    您可以在此函数here中找到要写入的内容 . 这应该足以让你解决这个问题！

    回复于
  • 0

    与jQuery需要：

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

    例如

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

    对于JS需要为link元素提供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>
    回复于
  • 1

    看看你的JavaScript函数，你正在使用方法'getElementById' . 我相信您知道，您可以在HTML中为元素添加Id属性 . 这正是这种方法所寻求的 . 要验证，您可以打开开发人员工具（在Chrome中，您可以使用F12或右键单击并选择“检查”） . 在开发人员工具中，有一个可以编写JavaScript的控制台，它会返回结果 . 它也是显示使用console.log（）等记录的信息的地方 . 尝试添加Id to和element，并在控制台中使用'getElementById'方法查看它返回的内容 .

    一旦你研究了这个，你可能想知道一旦你选择了它就可以用JavaScript修改元素的属性 . 一些自我探索或谷歌搜索会告诉你如何做到这一点 . 这样您就可以修改链接带给页面的确切内容 .

    回复于
  • 0

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

    通过这段代码，我通过按钮事件启用和禁用CSS . 简单!!! :-)

    回复于

相关问题