js怎么设置css后缀

Posted 2023-05-08

设置平常的我知道，但是为了兼容css3之类的动画，请问js
怎么设置各浏览器的后缀

你说的是浏览器前缀吧。
兼容的方法就是全部写上，浏览器不识别的就会自动忽略了，比如边框圆角的css3属性：
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

各浏览器前缀如下表，更全的你到mozilla的MDN里查：
前缀　　　　　　　　 浏览器
-webkit-　　　　　　chrome、safari
-moz-　　　　　　　 firefox
-ms- IE
-o- opera
还有一个更简单的方法，是用prefixfree.js这个插件，引入后它会自动检测并添加兼容前缀，这样你写的时候都不用加，这个插件在GitHub上有，你去搜下吧。 参考技术A

[javascript] view plain copy

//js设置css样式 和 获取css样式的值  

$("#id").css("left","20px");//设置  

$("#id").css("left");//获取  

参考技术B 应该是设置前缀，用transform举例
-webkit-transform这个属性在js里是WebkitTransform
规则就是把横杠后的一个字母大写，然后去掉横杠本回答被提问者采纳

laypagepage设置

1、引入laypage所需的js和css文件
<link href="js/laypage/1.3/skin/laypage.css" rel="stylesheet"/>
<script type="text/javascript" src="js/laypage/1.3/laypage.js"></script>
<script type="text/javascript" src="js/layer/2.1/layer.js"></script>
2、定义分页需要显示的地方,id为doctorDiv是分页要显示的地方
1 <div class="doctor_list">
2 <ul id="doctorUL">
3 <div style="clear: both;"></div>
4 </ul>
5 <div style="clear: both;"></div>
6 <div class="pages" id="doctorDiv">
7
8 </div>
9 </div>
3、使用ajax异步请求查询数据，并分页显示
1 <script type="text/javascript">
2
3 //定义全局变量记录页码信息
4 var globalDate = ;
5 //1页显示两条数据
6 globalDate.pageSize=2;
7
8 $(function ()
9 //查询数据
10 search();
11
12 );
13
14
15 //查询数据
16 function search(date)
17 var str = "";
18 $.ajax(
19 type: "post",
20 url: "<%=basePath%>mytlist.html",
21 dataType: "json",
22 async: true,
23 data: date,
24 success: function (data)
25 if (data.result)
26 var mydata = data.obj.list;
27 for (var i = 0; i < mydata.length; i++)
28 var info = mydata[i];
29 str += "<li>";
30 str += "<a onclick=" + "doctorDetail('" + info.id + "')" + ">";
31 // str+="<a href='mytdoctor_xq.html?id='"+info.id+">";
32 str += "<img src=" + info.photo + ">";
33 str += "<div class='yi_text'>";
34 str += "<h2>" + info.name;
35 str += "<span>" + info.title + "</span>";
36 str += "</h2>";
37 str += "<h3>科室：" + info.department_one + "</h3>";
38 str += "<h3>";
39 str += "<em>评分：</em>";
40 str += "<span>";
41 if (info.total_score != null && info.total_score != "" && info.total_evaluate_num != null && info.total_evaluate_num != "")
42 var pingfen = info.total_score / info.total_evaluate_num; //评分
43 var j;
44 for (j=0; j < pingfen; j++)
45 str += "<img src='images/pc/icon_031.png'>";
46
47 if(j<5)
48 for(var k=0;k<5-j;k++)
49 str += "<img src='images/pc/icon_032.png'>";
50
51
52
53 str += "</span>"
54 str += "</h3>";
55 str += "<h3>所在医院：" + info.hospital + "</h3>";
56 str += "<p>疾病擅长：" + info.skilful + "</p>";
57 str += "</div>";
58 str += "</a>";
59 str += "</li>";
60
61 $("#doctorUL").empty();
62 $("#doctorUL").append(str);
63 var page = data.obj.pages; //总页数
64 var curr = data.obj.pageNum; //当前页
65 laypage(
66 cont: 'doctorDiv', //分页需要显示的地方
67 pages: page, //总页数
68 curr: curr, //当前页
69 groups: 3,//连续显示分页数
70 skip: true, //是否开启跳页
71 first: '首页',
72 last: '尾页',
73 skin: 'molv', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
74 prev: '<', //若不显示，设置false即可
75 next: '>', //若不显示，设置false即可
76 jump: function (e, first) //触发分页后的回调
77 if (!first) //一定要加此判断，否则初始时会无限刷新
78 globalDate.pageNum = e.curr;
79 search(globalDate);
80
81
82 );
83
84
85 else
86 //错误
87 console.log("错误");
88
89
90 );
91
92 </script>
4、最终效果

5、感觉laypage显示出来的页码有点扁，高度不够，所以稍微修改了一点css
1 <%--修改laypage的样式--%>
2 <style>
3 .laypage_main a, .laypage_main input, .laypage_main span
4 height: 40px;
5 line-height: 40px
6
7
8 .laypage_main button
9 height: 40px;
10 line-height: 40px;
11 margin-left: 5px;
12 padding: 0 10px;
13 color: #666
14
15 </style> 参考技术A 1、通过ftp上传一个landing.php到服务器上的/wp-content/themes/主题名称/ 目录，文件内容如下< ?php/*Template Name: Landing Page*/?>

2、在WP后台 页面>添加新页面 那里创建一个新页面，模板选用Lading page，名字可以叫start3、在 设置>阅读 那里设定首页为静态页，选择刚刚创建的start作为默认首页这样Blog首页就变成了没有任何theme模板内容的空白landing page。然后参照一些landingpage的模板编辑成你想要的样子就可以了。怎么链接到blog原本的首页呢？通常是/page/1，可以在 设置>阅读 里将首页改回来，确认一下具体的链接是什么。你也可以在landingpage调用你的博客中的其他文章，下面的代码是调用分类1中的最后5篇文章：<ul>< ?phprewind_posts();global $post;$myposts = get_posts('numberposts=5&orderby=date&order=DESC&category=1');foreach($myposts as $post) :?><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li><?php endforeach; ?></ul>你也可以参照此方法调用其他你想显示在landingpage的文章。