javascript getElementsByClassName和setAttribute不起作用
javascript getElementsByClassName and setAttribute not working
我添加了4个"range"类型的输入,并使用它们的值来设置另一个元素的RGBA值,但它不起作用。
window.onload = init;
function init(){
document.getElementById("colorR").onchange() = setColors;
document.getElementById("colorG").onchange() = setColors;
document.getElementById("colorB").onchange() = setColors;
document.getElementById("Opacity").onchange() = setColors;
}
function setColors(){
var r = document.getElementById("colorR").value;
var g = document.getElementById("colorG").value;
var b = document.getElementById("colorB").value;
var a = document.getElementById("Opacity").value;
//alert(r+", "+g+", "+b+", "+a);
document.getElementsByClassName("previewAreaBox")[0].style.setAttribute(
"background-color", "rgba(",r+", "+g+", "+b+", "+a/100+");");
}
如有任何帮助,我们将不胜感激。谢谢
style.setAttribute(
setAttribute
适用于元素,而不是样式。
background-color
是样式属性,而不是属性。
document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = ".."
document.getElementById("colorR").onchange() = setColors;
应该改为
document.getElementById("colorR").onchange = setColors;
如果不进行更改,代码的其余部分将根本无法运行,因为onchange()
调用事件处理程序,而不带括号的onchange
用于分配事件处理程序。
也
正如Connor的有益评论所指出的,Andy的回答包含了解决方案的一部分,我还注意到您的代码中还有一个错误:
"rgba(",r+", "+g+", "+b+", "+a/100+");"
需要像这样(加上逗号现在所在的位置,以及算术周围的括号,以防止其左操作数过早转换为字符串):
"rgba(" +r+ ", " +g+ ", " +b+ ", " + (a/100) +");"
因此,将其插入Andy的答案中,setColors
函数的最后一行应该是这样的:
document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = "rgba(" +r+ ", " +g+ ", " +b+ ", " + (a/100) +");";
好的,所以这里有一些问题
1.您需要将函数分配给变更事件,而不是调用变更事件
2.您不在样式上使用setAttribute,而是使用它来设置元素的属性
3.你应该缓存你的元素
window.onload = init;
var elementR, elementG, elementB, opacityElement;
function init(){
elementR = document.getElementById("colorR");
elementG = document.getElementById("colorG");
elementB = document.getElementById("colorB");
opacityElement = document.getElementById("Opacity");
// Set change events
elementR.onchange =
elementG.onchange =
elementB.onchange =
opacityElement.onchange = setColors;
}
function setColors(){
var r = elementR.value,
g = elementG.value,
b = elementB.value,
a = opacityElement.value,
preview = document.getElementsByClassName("previewAreaBox")[0];
preview.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + a / 100 + ')';
}
Element.onchange() = something;
不会工作,因为onchange();
实际上触发了事件,并且没有为其分配功能。
您也可以将Array.join
用于类似于so 的rgba
var rgba = [elementR.value, elementG.value, elementB.value,
opacityElement.value / 100];
preview.style.backgroundColor = 'rgba(' + rgba.join(',') + ')';
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- Meteor-添加用户自定义字段的方法不起作用
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- Textarea必需的attribut在javascript中不起作用
- 为什么javascript:void(0)在Firefox中不起作用
- 退出全屏不起作用