如何onclick使用JavaScript 更改HTML元素的类以响应事件?
我正在寻找一种<style>使用JavaScript 将标记插入HTML页面的方法.
到目前为止我找到的最佳方式:
var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);
Run Code Online (Sandbox Code Playgroud)
这适用于Firefox,Opera和Internet Explorer,但不适用于Google Chrome.<br>IE的前端也有点难看.
有谁知道创建<style>标签的方法
更好
适用于Chrome?
或者可能
这是我应该避免的非标准事情
三个工作浏览器很棒,谁还使用Chrome?
是否可以动态更改CSS规则集(即某些JS会在用户单击窗口小部件时更改CSS规则集)
这个特殊的CSS规则集应用于页面上的许多元素(通过类选择器),我想在用户单击小部件时修改它,以便所有具有类的元素发生更改.
在CSS中,当您将鼠标悬停在元素上时,可以使用:hover伪类为其指定视图:
.element_class_name:hover {
/* stuff here */
}
Run Code Online (Sandbox Code Playgroud)
你如何使用jquery添加或"打开"这个伪类?通常在jQuery中,如果你想添加一个类,你会做:
$(this).addClass("class_name");
Run Code Online (Sandbox Code Playgroud)
我试过"悬停",但这实际上在元素中添加了一个名为"hover"的类.
如果有人知道该写什么,请告诉我!谢谢!
是否可以使用":: - webkit-input-placeholder"和jQuery为占位符文本设置颜色?
像这样的东西:
$("input::-webkit-input-placeholder").css({"color" : "#b2cde0"});
Run Code Online (Sandbox Code Playgroud) 你能用Javascript设置:使用css的样式吗?
所以我们说:
$("#foo li:after").css("left","100px");
Run Code Online (Sandbox Code Playgroud) 我目前正在使用Webkit的:: - webkit-scrollbar CSS属性设置滚动条的样式,并希望在mousemove事件上更改这些属性.问题是我似乎无法找到一种动态获取滚动条CSS的方法.
是否可以通过javascript(可能使用jQuery)动态设置webkit滚动条的样式?
为简单起见,这个例子只是我需要做的一个例子.说,我有一个元素,哪个样式在CSS中设置.为元素以及Pseudo-class设置样式,比如元素:悬停.我可以使用以下JavaScript覆盖元素的样式:element.style.setProperty('property-name','new value','').如何通过JavaScript更改Pseudo-class的样式?
谢谢.
<html>
<head>
<style type='text/css'>
#myBtn {
background-color: red;
}
#myBtn:hover {
background-color: blue;
}
</style>
</head>
<body>
<button id='myBtn'>Colored button</button>
<button onclick="ChangeColor();">Script button</button>
<script type="application/x-javascript">
function ChangeColor() {
var Btn = document.getElementById('myBtn');
Btn.style.setProperty('background-color', 'green', '');
};
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) window.getComputedStyle根据文档,该函数应该能够获得计算的伪类样式,如:hover .
它也被解释为另一个问题的答案
但正如最后一条评论在该问题中所说的那样,事实上它根本不起作用,它只返回正常的风格,而不是:悬停风格.你可以在这个jsfiddle中看到自己.警报返回红色,而不是绿色.
developer.mozilla.org上的文档也有一个例子,但这也不起作用 - 见这里.
在这个问题中,回答者在评论中指出它根本不起作用,但没有给出解释.
可能是在函数返回正确的值之前必须完全呈现样式表吗?我试过设置一些延迟,但似乎没有任何工作.
我尝试过最新的Firefox,Chrome和IE浏览器.有人知道为什么这个功能没有按预期工作吗?
这可能吗?
例如,如果用户按下"返回"键并触发"mousedown"事件,我该如何使用:active styles呈现元素?
我知道可以使用类来实现这一点,但我更喜欢使用预先存在的:活动样式.
javascript ×8
css ×7
html ×3
jquery ×3
css3 ×2
dom ×2
pseudo-class ×2
colors ×1
input ×1
placeholder ×1
scrollbar ×1
webkit ×1