如何onclick使用JavaScript 更改HTML元素的类以响应事件？
我在Javascript中有这样的字符串:
string = '@usernameWhats on your mind?'
我需要摆脱'Whats on your mind?'字符串.
我该怎么办？
我从另一个Stack Overflow问题中找到了以下正则表达式:使用JavaScript更改元素的类
并且已经在我的部分脚本中成功使用它,但在另一个中它似乎失败了.
我在jsFiddle上汇总了一个极简主义的测试用例,它也失败了:
HTML:
<div class="foo" id="foo">
hello
</div>?
JS:
$(document).ready(function(){
foo = document.getElementById('foo');
foo.className += ' bar foobar';
alert(foo.className);
foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' )
alert(foo.className);
})?
这是我的代码
<!DOCTYPE html>
<html>
<body>
<style>
.someClass {
fill:gray;
}
</style>
<svg width="400" height="110">
<rect class="someClass" width="100" height="100"/>
</svg>
<svg width="400" height="110">
<rect class="someClass" width="100" height="100"/>
</svg>
<svg width="400" height="110">
<rect class="a" width="100" height="100"/>
</svg>
</body>
</html>
如何删除所有类(.someClass)只需要在文件中的.someClass中删除而不使用id？
我正在使用Google Maps Places API自动填充功能在页面上提供位置自动填充功能,类似于:https: //developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
我也使用Google Material Design Lite来设置输入框的样式.除了占位符文本之外,这一切都正常.MDL使用标签标签提供占位符文本和突出显示下划线,但Google Maps Places API 在输入标记上使用占位符属性,该属性似乎会覆盖MDL占位符文本并停止下划线效果; 另外,看起来我不能将占位符文本设置为不同的颜色/不透明度.
我希望能够关闭Google Maps Places API占位符文本,但即使将该属性设置为空字符串也会破坏Google MDL标签(不会显示占位符文字).
有没有办法阻止Google Maps API在我的输入框中放置占位符文字？
html javascript google-maps google-maps-api-3 google-places-api
如何在多个类选定元素上添加/删除单个类.
在我的设置中,我有一些缓存的变量并不是每个变量:
var classOne = document.querySelector(".class1");
var classTwo = document.querySelector(".class2");
var classThree = document.querySelector(".class3");
var classFour = document.querySelector(".class4");
但我也想尝试这样的事情:
var allClasses = [classOne, classTwo, classThree, classFour];
allClasses.classList.add("active");
allClasses.classList.remove("active");
似乎没有工作.
请不要jQuery.
对于一个项目，我必须使用定义的样式表。我无法对其进行编辑，我必须接受它。
但是，有些样式不适用于此网站（例如，边距）。
我也创建了自己的CSS文件，该文件将覆盖其中的某些属性。
一个例子，如果我有这个：
<div id="main-content" class="container">My test text</div>
以及css文件中的以下css指令：
div.container{margin:5px}
div#main-content{margin-left:235px; ...}
我想在MY CSS中定义div＃main-content没有此边距，但它是默认值。
我该怎么办？我不想这样做，margin-left:0px因为如果我具有全局样式（假设所有人div.container都应具有5px的边距，我希望它适用于我以前的div。这些数据可能会发生变化。
我被告知我不能再在我正在构建的项目中使用 jQuery，所以我被迫使用普通的 Javascript，这有时会超出我的能力范围。我希望简单地将这个 jQuery 转换为 js。我在 Stack Overflow 上找了又找，没有结果，但我觉得应该没那么难。任何帮助都会很棒！
$('.navbuttoncontainer a').on( 'click', function() {
$('.navbuttoncontainer .current').removeClass('current');
$(this).addClass('current');
我有一个页面,在三个容器中有三个按钮.每个容器中的第一个按钮具有相同的id,每个容器中的第二个按钮具有相同id的按钮,并且每个容器中的第三个按钮具有相同的按钮id.我有一个Javascript接受传入信息的脚本,并相应地更改按钮中文本的颜色.不幸的是,当脚本检测到需要进行更改并尝试应用相应的CSS时,只有第一个容器中的按钮才会应用CSS.我真的不明白为什么每个具有相同元素的元素id都没有将CSS应用于它.
该Javascript行动:
document.getElementById('button_1').className = "buttonActive";
按钮元素:
<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>
<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>
<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>