大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
首先获取元素,然后使用css设置边框颜色即可。
创新新互联,凭借十载的成都网站建设、网站建设经验,本着真心·诚心服务的企业理念服务于成都中小企业设计网站有上千多家案例。做网站建设,选成都创新互联。
$("#test").css("border-right-color","red");
通过上面的设置,就可以将元素id是test的元素的右边框设置成红色。
页面上只引用一个jquery的脚本是不行的,color属于ui,在引用一个jquery-ui的脚本就可以了。解决方法如下:
1、首先新建一个HTML文档,并引入jquery。
2、定义一个p元素,并将其设置为一个长宽为100px的蓝色方块。
3、保存以上内容,并在浏览器预览效果。
4、为p元素设置animate()动画方法,使其被点击之后,在3秒之中实现宽度变大,高度变小,成为一个长方形。
5、保存以上文件,就可以在浏览器预览一个基本的jquery的animate()的颜色效果图。
主题皮肤切换效果在很多网站和系统中会用到,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验。
原理:实现该功能的原理就是通过点击定义的主题样式,改变页面当前引用的主题CSS文件,并且将当前的主题样式写入cookie中或者写入数据库中,以便下次该用户重新访问页面时,调用的就是上次设置好的主题样式。
步骤:
首先,准备三个样式表CSS文件,分别是三种颜色风格的主题皮肤,将其引入页面。
给每个link添加了title属性,另外禁用了第2个和第3个CSS文件,就是默认起作用的是第1个CSS文件。
HTML内容
CSS样式可以自己设置自己喜欢的布局,每个人用到的样式排版不同,这里就不展示css代码。
JQuery:
引入jquery库和jquery.cookie插件。jquery.cookie插件为jQuery提供了强大的cookie操作功能。
当用户点击切换选择主题时,要发生以下动作:获取选择的主题(id),查看引用的CSS文件,如果发现其title属性值正好与当前选中的主题id值相等,则应用该主题CSS文件,同时将其他引用的CSS文件禁用,并且将当前选中的主题写入cookie中,设置cookie过期时间,最后将当前选中的主题按钮(li)设置为当前选中状态。具体看下面的代码:
注意,本例中我将选中的样式保存在用户cookie中,cookie名称为”colorstyle“,值为当前选中的主题值,过去时间为30天,即:expires:30
接着是页面载入时,读取主题cookie值,如果主题cookie存在则调用cookie值对应的主题样式CSS文件,并且设置当前主题按钮状态为选中状态,反之,则调用默认样式。代码如下:
应用的cookie记录用户所选择设置的主题皮肤样式,当cookie到期或者用户清除了浏览器的cookie,或者用户换用其他浏览器浏览时,当前设置的主题就会失效。为了让用户永久保存选择的主题样式,必须将所选的主题与用户信息对应,写入数据库,下次该用户登录就可以直接读取以往选择的主题。