blocks|key|1320852|text|尽管只有一秒的时间，锚标记的文本实际上被设计为白色文本。锚标记将用户带到/index.html，因此只要用户在页面上，效果就不可见。为了避免重定向，请将href属性设置为#|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1320853|​|1320854|++function+white()+{
++++const+input+=+document.getElementById("weekly");
++++input.style.color+=+"white";
++}|code-block|syntax|javascript|1320855|<ul>
++<li><a+id="weekly"+href="#"+onclick="white()">Weekly</a></li>
</ul>|1320856|1320857|entityMap^0|10|B|24|4|2D|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|Q|$]]

<p>Although only for a split second, the anchor tag's text is indeed styled to be rendered as white text. Your anchor tag takes the user to <code>/index.html</code> and thus the effect is not visible for as long as the user is on the page. To avoid redirecting, set the <code>href</code> attribute to <code>#</code>:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>  function white() {
    const input = document.getElementById("weekly");
    input.style.color = "white";
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;&lt;a id="weekly" href="#" onclick="white()"&gt;Weekly&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1320882|text|同样的代码片段也能工作。您面临的问题是您的<a>标记有一个链接，即导航到我假设的相同页面，因此页面被重新加载，链接又是黑色的。使用href+(和更可见的颜色)参见：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1320883|​|1320884|function+white()+{
++const+input+=+document.getElementById("weekly");
++input.style.color+=+"green";
}|code-block|syntax|javascript|1320885|<ul>
++<li><a+id="weekly"+onclick="white()">Weekly</a></li>
</ul>|1320886|1320887|entityMap^0|L|3|1T|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>Your very same code snippet works. The issue you are facing is that your <code>&lt;a&gt;</code> tag has a link, that is navigating to what I assume the same page, hence the page is reloaded and the link is black again. See withoud the <code>href</code> (and a more visible color):</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function white() {
  const input = document.getElementById("weekly");
  input.style.color = "green";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;&lt;a id="weekly" onclick="white()"&gt;Weekly&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1320893|text|您的代码片段运行良好，但可能会使其更通用，以便您可以以其他方式使用它，如下例所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1320894|​|1320895|//+es6+"fat+arrow"+one+liner
changeColor+=+(element,+color)+=>+element.style.color+=+color;

//+maybe+more+familiar
//+function+changeColor(element,+color)+{
//++element.style.color+=+color;
//+}|code-block|syntax|javascript|1320896|<ul>
++<li><a+id="weekly"+href="#"+onclick="changeColor(this,+'red')">Weekly</a></li>
++<li><a+id="daily"+href="#"+onclick="changeColor(this,+'blue')">Daily</a></li>
++<li><a+id="hourly"+href="#"+onclick="changeColor(this,+'green')">Hourly</a></li>
</ul>|1320897|1320898|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Your snippet works fine, but might make it a little more generic so you can use it in other ways, as example below.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// es6 "fat arrow" one liner
changeColor = (element, color) =&gt; element.style.color = color;

// maybe more familiar
// function changeColor(element, color) {
//  element.style.color = color;
// }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;&lt;a id="weekly" href="#" onclick="changeColor(this, 'red')"&gt;Weekly&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="daily" href="#" onclick="changeColor(this, 'blue')"&gt;Daily&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="hourly" href="#" onclick="changeColor(this, 'green')"&gt;Hourly&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1320923|text|通常情况下，<a>标记会将您重定向到链接，但是您可以避免重定向，然后通过使用将停止元素默认行为的preventDafault函数将自定义函数应用于<a>标记。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1320924|​|1320925|function+white(event)+{
++event.preventDefault()
++const+input+=+document.getElementById("weekly");
++input.style.color+=+"white";
}|code-block|syntax|javascript|1320926|<ul>
++<li><a+id="weekly"+href="/index.html"+onclick="white(event,this)">Weekly</a></li>
</ul>|1320927|1320928|entityMap^0|6|3|1C|E|21|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|Q|$]]

<p>normally <code>&lt;a&gt;</code> tags redirect you to a link but you can avoid redirection and then apply custom function to <code>&lt;a&gt;</code> tag by using <code>preventDafault</code> function which will stop default behaviour of an element</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function white(event) {
  event.preventDefault()
  const input = document.getElementById("weekly");
  input.style.color = "white";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;&lt;a id="weekly" href="/index.html" onclick="white(event,this)"&gt;Weekly&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


<p>I am new into JavaScript and I've been trying to change the color of a text line in my website when I click on it with JS, I know there are ways to do it just with CSS but I'd like to practice some JS, this is what I've been trying so far:</p>
<p>I have this list:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function white() {
  const input = document.getElementById("weekly");
  input.style.color = "white";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;&lt;a id="weekly" href="/index.html" onclick="white()"&gt;Weekly&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>
<p><em>It is a longer list but i didn't want this to look messy :)</em></p>
<p>I want to change the color of &quot;Weekly&quot; when it's clicked on and this is what i have tried:
I've been trying for a while and this is the best I came up with but doesn't seem to work.</p>


Change a color of a text line when clicked with JS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我刚加入JavaScript，当我用JS点击它的时候，我一直在尝试改变我网站中文字行的颜色，我知道有一些方法可以用CSS来实现，但我想练习一些JS，这就是我迄今为止一直在尝试的：我有一份清单：​function white() {  const input = document.getElementById("week...

问使用JS单击时更改文本行的颜色
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JS单击时更改文本行的颜色EN