使用jquery恢复元素样式
Restoring elements style using jquery
假设我有以下css:
.cls {}
.cls ul {list-style-type:none;}
.cls ul li
{
border-color:#ff0000;
border-style:solid;
float:left;
padding:0px 20px 0px 2px;
border-left-width:1px;
border-bottom-width:0px;
border-top-width:0px;
border-right-width:0px;
}
我将类"cls"分配给<div>如下所示:
<div class="cls">
<ul>
<li id="foo">Foo</li>
<li id="bar">Bar</li>
</ul>
</div>
如果我使用jquery操作元素属性,比如说我将"条形"列表项上的左边框颜色更改如下:
$("#bar").css("border-left-color", "#0000ff");
当包含<div>最初被分配到"cls"类?显然不用做:
$("#bar").css("border-left-color", "#ffff00"); }.
形式为$().restoreClass()或等效的东西???
定义一个新的类
.blueBorder {
border-left-color: #0000ff;
}
然后你可以用切换样式
$("#bar").toggleClass('blueBorder'); // with blue border
$("#bar").toggleClass('blueBorder'); // without blue border
$("#bar").toggleClass('blueBorder'); // with blue border
这是切换样式的最佳方式。请记住,您可以将多个类应用于单个HTML元素,这样您就可以将样式组合在一起。例如
$("#bar").toggleClass('blueBorder'); // with blue border
$("#bar").toggleClass('redBackground'); // with blue border and red background
$("#bar").toggleClass('blueBorder'); // with red background
您应该将您的演示(css)与行为(js)分开,因此不建议使用以下内容:
$("#bar").css("border-left-color", "#0000ff");
想象一下,如果你写了一千次,后来你的客户决定把它改成黄色,你将要做的工作。
此处演示
$("#bar").css("border-left-color", "");
当您使用.css时,它会向元素添加一个样式属性。只要在呈现页面时没有样式属性,调用$().removeAttr('style')
就可以了。
Js报价示例
尝试:$("#bar").removeAttr('style')
您可以获取特定的CSS属性并将其存储在字符串中。然后,您可以在完成更改后恢复它。但是您必须小心CSS属性的名称:它在这里工作:http://jsfiddle.net/KgEjr/4/
var myOriginal = "" ;
$('#st').click(
function() { storeAndChange(); } );
$('#re').click(
function() { restore(); } );
function storeAndChange()
{
myOriginal = $("#bar").css("border-left-color");
$("#bar").css("border-left-color", "#0000ff");
$("#msg").text("changed");
}
function restore()
{
$("#bar").css("border-left-color", myOriginal);
$("#msg").text("restored");
}
您能将样式存储在数据属性中并稍后恢复吗?这似乎适用于你的例子。
$(function(){
$(".cls ul li").each(function(){
$(this).data("defaultStyle",$(this).attr("style") || "");
});
$("#foo").css({"border-left-color": "#ff00ff", "font-style": "italic", "background-color": "#efefef"});
$("#bar").css({"border-left-color": "#0000ff", "font-weight": "bold", "background-color": "#cdcdcd"});
$(".cls ul li").click(function(){
$(this).attr("style", $(this).data("defaultStyle"));
});
});
相关文章:
- insertRule不插入样式元素
- 具有描边属性的 SVG 样式 G 元素
- 如何在样式元素中获取 CSS 代码
- 如何让用户更改表单的样式元素
- 如何根据子组件的状态更改父组件样式元素
- 如何使样式元素的一部分成为函数?(IE:颜色:$random而不是颜色:红色)
- 动态创建的样式元素
- 如何使用javascript获取外部样式元素的css属性
- 在ExtJS中为一个项目添加多个样式元素
- 在目标页面加载完成之前添加样式元素
- 将样式元素动态插入DOM的最后一种跨浏览器方式
- CKEditor 剥离 Rails 中跨度类的样式元素
- 根据单元格内容更改样式元素
- 更改绝对样式元素的位置
- 在React组件中呈现样式元素
- 样式元素左置:页面的x px
- 按钮样式元素的类冲突
- Javascript样式元素
- 在移动设备中,哪一个更快:包括一个额外的CSS文件或在JavaScript中创建一个样式元素
- 需要一种方法来样式元素,我不能访问