Fatal编程技术网
  • javascript/
  • Javascript 通过单击按钮更改样式表仅适用于特定元素

Javascript 通过单击按钮更改样式表仅适用于特定元素

javascript html css

Javascript 通过单击按钮更改样式表仅适用于特定元素,javascript,html,css,stylesheet,Javascript,Html,Css,Stylesheet,所以，这个问题是基于我目前正在做的一个家庭作业。我得到了一个HTML文档和两个样式表。HTML文档非常简单： <html> <head> <title>DOM-scripting: change style</title> <link rel="stylesheet" href="style/style1.css" id="stylesheet"/> </head> <body> <na

所以，这个问题是基于我目前正在做的一个家庭作业。我得到了一个HTML文档和两个样式表。HTML文档非常简单：

<html>
<head>
   <title>DOM-scripting: change style</title>
   <link rel="stylesheet" href="style/style1.css" id="stylesheet"/>
</head>
<body>
    <nav class="chooseStyle">
        <input type="button" id="style1Button" value="Style 1"/>
        <input type="button" id="style2Button" value="Style 2"/>
    </nav>
    <article>
        <h1>Style change using DOM-scripting</h1>
        <p> sample text </p>
        <p> sample text </p>
        <p> sample text </p>
    </article>
    <nav class="links">
        <ul>
            <li><a href="link">school name</a></li>
            <li><a href="link">school name</a></li>
       </nav>

    <script src="scriptToUse.js"></script>
</body>
</html>
Style2.css由以下内容组成：

body {
    background-color: #676632;
}

input[type="button"] {
    color: #F5F265;
    background-color: #9B9302;
}

article {
    margin-left: 150px;
    margin-right: 150px;
    text-indent: 20px;
    color: #C9C892;
}

h1 {
    color: #EEF1BA;
    text-align: center;
}

a {
    color: #A1FA56;
    text-decoration: none;
    font-weight: bold;
}

ul {
    padding: 0;
}

li {
    list-style-type: none;
}

body {
    color: #EEEEAA;
}

input[type="button"] {
    color: #9B9302;
    background-color: #F5F265;
}

article {
    margin-left: auto;
    margin-right: auto;
    text-align: justify;

    color: #A3A163;
}

h1 {
    color: #AAAA66;
    text-align: left;
}

a {
    color: #CDCF9B;
}

ul {
    padding: 0;
}

li {
    list-style-type: none;
}
练习的第一部分说明我需要创建一个javascript文件，该文件允许网页的样式表根据单击的按钮进行更改。第一个按钮表示第一个样式表，第二个按钮表示第二个样式表。我发现这很容易，一切都很好

但是，练习的第二部分陈述如下：“现在编辑javascript文件，以便在单击按钮时仅更改文章的样式。不要编辑CSS文件。”这意味着样式表的href仍应更改，如第一部分所述，但是现在它可能只影响文章元素的样式，而不是整个页面的样式

在过去的一个小时里，我一直在寻找相关的问题，但似乎没有什么能真正提供解决方案。我读过一些问题，指出在不更改样式表本身的任何内容的情况下，仅将样式表应用于特定元素是不可能的。请记住，我才刚上大学一年级，刚刚开始学习javascript，这意味着解决方案不应该那么难找到。我想是吧

到目前为止我编写的Javascript代码：

'use strict';

const handleLoad = () => {
    let style1 = document.getElementById('style1Button');
    let style2 = document.getElementById('style2Button');
    style1.addEventListener('click', handleClick);
    style2.addEventListener('click', handleClick);
};

const handleClick = (event) => {
    if(event.target.value === "Style 1") {
        document.getElementById("stylesheet").href = "style/style1.css";
        // should only change article style 
        // currently still referring to the whole document
    } else {
        document.getElementById("stylesheet").href = "style/style2.css";
        // should also only change article style
        // also still referring to the whole document
    }
};

window.addEventListener('load', handleLoad);
除了article元素之外，有没有任何方法可以阻止所有元素的CSS规则？或者更改不应受影响的元素的类或ID

提前多谢：）

这就是最终解决它的原因。（代码可能没有它可能做到的那么紧凑和正确，但它确实有效，所以我非常高兴：D）：

非常非常简单的例子。你说它在Javascript中是新的。这就是为什么我给你们举一个很容易理解的例子。事实上，一个更符合逻辑的解决方案可以通过在按钮周围循环来产生，找出它们在哪个按钮上，并根据按钮定义需要更改的元素，但这是现阶段最简单的示例。你必须亲自调查和学习。祝你好运

const style1Button=document.getElementById（“style1Button”）；
style1Button.addEventListener（“单击”，styleArticle）；
函数样式文章（e）{
let article=document.getElementById（“article”）；//整篇文章
//使用querySelector，您可以通过这种方式访问主元素中的元素。
article.querySelector（“文章标题”）.style.color=“红色”；
article.querySelector（“.text1”）.style.color=“蓝色”；
article.querySelector（“.text2”）.style.color=“橙色”；
article.querySelector（“.text3”）.style.color=“gray”；
}



  •
    您可以使用javascript选择元素并设置它们的样式，而无需更改样式表

    有不同的方法可以做到这一点，但如果您无法更改此HTML文件，则可以更改文章元素内的文本颜色：

    document.querySelector('article').style.color = 'red';
    您可以设置颜色以外的样式，也可以使用querySelector选择文章中的H1或段落元素，但我会让您弄清楚；）

    在这种情况下，我们可以将用作样式的封装

    这个想法就像将一个包含大量样式的css文件添加到一个只有
    article
    元素的页面，显然其他样式不会产生任何效果

    我们也可以使用
    shadowRoot
    将文章放到它自己的小世界中，并添加一个包含更多样式的文件

    代码被大量注释。如果您有任何问题，请留下评论：）

    首先在加载时，我们准备shadow元素：

    const handleLoad = () => {

    // Old Code for button handlers still needed
    let style1 = document.getElementById('style1Button');
    let style2 = document.getElementById('style2Button');
    style1.addEventListener('click', handleClick);
    style2.addEventListener('click', handleClick);


    // New Code Below

    // Select the article from the page 
    const article = document.querySelector('article');
    // Create an empty div Element to work as a bucket
    const placeholderElement = document.createElement('div');
    // set it's id attribute to select it later
    placeholderElement.setAttribute('id', 'placeholderElementShadowRot')
    // replace the article with our div in the document
    // the article element is not completly lose at this point
    // we still have in the variable article
    article.replaceWith(placeholderElement);
    // attache a shadow to the div element
    const shadow = placeholderElement.attachShadow({ mode: 'open' });
    // sets the shadow's innerHTML equal to article outerHTML
    shadow.innerHTML = article.outerHTML;


    // create a link
    const link = document.createElement('link');
    // set it's href attribute to the first style file
    link.setAttribute("href", 'style1.css');
    // set the rel attribute
    link.setAttribute("rel", "stylesheet");
    // add the link to the shadow
    shadow.appendChild(link)
};
    然后点击按钮

    const handleClick = (event) => {
    // Select our div we created before using the id
    const placeholderElement = document.querySelector('#placeholderElementShadowRot');
    // since we already attached a shadow 
    // we can use it through the property .shadowRoot
    const shadow = placeholderElement.shadowRoot;

    // based on which button we add the relevant style file
    if (event.target.value === "Style 1") {
        shadow.querySelector('link').setAttribute("href", "style1.css")
    } else {
        shadow.querySelector('link').setAttribute("href", "style2.css")
    }
};
    注意：您的JS中有一个输入错误，处理程序名为
    handleclick
    小写
    click
    ，但您正在将大写
    click
    handleclick添加到
    addEventListener

    您能提供javascript吗？我们不是来帮你做家庭作业的，但是如果你被剧本的某个部分卡住了，我们很乐意帮助你。@ArnoTenkink当然！我当然不想让你做我的家庭作业：p，但就像你说的，我真的被这部分卡住了，我只是想知道如何解决它。那些css文件是什么样子的？要全局添加样式表并希望它只影响某些元素有点困难。如果选择器是名称空间，那么它很容易完成，我们只需要为除
    文章
    之外的所有内容打破名称空间，如果不是，那么您的脚本将得到大量的文件。我将文件添加到原始问题中。CSS文件只包含对元素标记名的引用。谢谢：），起初我确实考虑过用这种方式解决它，但有人告诉我应该通过在赋值中包含的样式表之间真正交替来完成。老实说，我仍然觉得这是最好的方法，但这与分配不符：（我不确定是否可以将特定的工作表分配给特定的元素。也许可以通过javascript更改css文件？var sheet=document.styleSheets；sheet[0].insertRule（“article{color:red；}”）谢谢：）。一开始我确实想过用这种方法来解决这个问题，但有人告诉我，应该在作业中包含的样式表之间进行真正的交替。老实说，我仍然觉得这是最好的方法，但这与作业不符：（“但我被告知应该通过在作业中包含的样式表之间真正交替来完成。”我真的不明白你的意思？作业包括我问题中提到的HTML文件，以及两个CSS文件。作业的第一部分说明我应该更改 
    const handleClick = (event) => {
    // Select our div we created before using the id
    const placeholderElement = document.querySelector('#placeholderElementShadowRot');
    // since we already attached a shadow 
    // we can use it through the property .shadowRoot
    const shadow = placeholderElement.shadowRoot;

    // based on which button we add the relevant style file
    if (event.target.value === "Style 1") {
        shadow.querySelector('link').setAttribute("href", "style1.css")
    } else {
        shadow.querySelector('link').setAttribute("href", "style2.css")
    }
};