扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
你可以先将要修改的css属性都放在一个class中,在需要的时候直接让这个对象调用这个class属性就可以了。jquery的写法就蛮简单,如果有需要也可以用jquery的,例子:$("").css({'color':'#ccc','font-size':'12px'})
创新互联始终致力于在企业网站建设领域发展。秉承“创新、求实、诚信、拼搏”的企业精神,致力为企业提供全面的网络宣传与技术应用整体策划方案,为企业提供包括“网站建设、响应式网站开发、手机网站建设、微信网站建设、小程序开发、商城网站制作、平台网站建设秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
js是无法直接修改css文件的,但可以通过取对象的方式修改对象的样式,通常有两种方法:
1、改变className,但首先在样式表中预设定样式类。
例如:document.getElementById('obj').className='...';
2、改变cssText。
例如:document.getElementById('obj').style.height='100px';
~如果你认可我的回答,请及时点击【采纳为满意回答】按钮
~~手机提问的朋友在客户端右上角评价点【满意】即可。
~你的采纳是我前进的动力
~~O(∩_∩)O,记得好评和采纳,互相帮助,谢谢。
如果你真想好好编网页的话, 极其建议你使用 jQuery 库, 网上下载一下。
在开头插入库,
script src="jquery.js" /script
然后你的问题解决方法就很简单了。
$(".content-block").css({ "height" : "20px" , "width" : "100px" , "background" : "#ccc" });
很明显 , $ 里面的content-block前面有 " . " , 就是自带class名称,所以上面的代码就是改变所有class名称为"content-block" 的标签。
$("#abc") 自带ID为 abc的所有元素.
$("div") 指代所有DIV元素。
$("div:last") 指代最后一个DIV。
有JQ之后 就不需要在用这么复杂的方法去获取了,真的。开始我也看不起JQ ,现在发现没这玩意网站的JS真心没法玩。
1、直接更改,比如:
xID.style.display = "block"; // 更改display属性,会覆盖css中的定义。
xID.style.display = ""; // 取消js更改display属性,以css样式为准。
这里的xID,是通过id获取的标签。当然,也可能是通过tagName之类的获取的标签。
这种方式,简单直接。但是要修改大量的样式的时候,不适合。所以,我更推荐第二种方式。
2、更改类名
xID.className = "xx yy";
如果有多个类,就用空格隔开。前提,在样式中要有已有类的定义。比如这里的xx和yy类,在css中应该是写好的。
这种方式把所有的样式写在了css文件中,适合更改较多的样式以及炫酷的样式。js就只做一件事情:改类。至于这个类会把标签变成什么样子,交给css吧。
通过jquery也可以达到如上的效果:
$("#xID").css({
fontSize:"12px",
display:"block"
}); // 直接更改样式
$("#xID").addClass("xx"); // 增加删除类
$("#xID").removeClass("xx");
link href="css/color1.css" id="color" rel="stylesheet" type="text/css" /!--注意这行的id--
a onclick="changeStyle(1)"样式1/a
a onclick="changeStyle(2)"样式2/a
上面是html,下面是js.把选定的样式加载进cookies ,网页加载先查cookie。
function getObject(elementId) { //获取指定id的object
if (document.getElementByIdx) { return document.getElementByIdx(elementId); }
else if (document.all) { return document.all[elementId]; }
else if (document.layers) { return document.layers[elementId]; }
}
function changeStyle(id){//切换样式
var stylesheet=getObject("color").href="css/color"+id+".css";
document.cookie="stylesheet="+escape(stylesheet);//写入Cookie
//alert(document.cookie);
//alert(stylesheet);
}
function initStyle(){ //初始化样式,如果cookie存在样式,则加载cookie样式,否则加载默认样式
if(/stylesheet=([^;]+)/.test(document.cookie))//判断是否存在cookie.
getObject("color").href=unescape(RegExp.$1);
//alert(/stylesheet=([^;]+)/.test(document.cookie));
}initStyle();
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流