扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
通过js来改变CSS属性,使用jQuery可以很方便的实现,像这样:
站在用户的角度思考问题,与客户深入沟通,找到抚松网站设计与抚松网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站设计、企业官网、英文网站、手机端网站、网站推广、主机域名、网络空间、企业邮箱。业务覆盖抚松地区。
$("img").css('border-color','red');
就可以把边框颜色都变成红色。
这是针对此问题的测试页面
2、这是3张图片
img src=';fm=11gp=0.jpg'
img src=';fm=11gp=0.jpg'
img src=';fm=11gp=0.jpg'
3、这是图片的样式,边框默认为灰色。
img{
max-width:200px;
border-color:gray;
border-width:10px;
border-style:solid;
}
4、现在通过这几行用到jQuery的代码,控制图片边框根据鼠标移入移出边框变灰和变红。
$(function(){
$("img").on('mouseover',function(){
$(this).css('border-color','red');
}).on('mouseout',function(){
$(this).css('border-color','gray');
});
});
5、效果如图
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");
在js中修改css样式,必须通过关键词style。在编辑修改CSS直接设置样式(内联样式)使用JavaScript设置元素样式的最简单方法是使用style属性,在我们通过JavaScript访问的每个HTML元素时都有一个style对象。
如何配置自行百度
1.scss文件定义变量
2.js中更改$textColor 变量的值
都是获取DOM
通过DOM分别修改当前DOM样式属性值、
当前DOM整体css样式、
修改当前DOM的className类名、
将link引入的标签作为DOM 修改link的href,从而修改引用的样式表。
详情转自:
修改样式
document.getELementById('div').style.fontSize = "20px";
修改写好的类样式
document.getELementById('div').className = "div";
js:
el.style.display = 'value' // el 为DOM元素,display为要设置的属性(width,height,等,采用驼峰式命名法),value为想要设置的值
jQ
$('.class').css('name', 'value');
或者
$('.class').css({
name1: value1,
name2: value2,
'backgroud-color': 'red'
})
键值可以使用驼峰式命名法
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流