Javascript 如何缩短长重复路径';s和combine语句
对于一个网站,我使用9种不同外观的标签,这些标签在不同的情况下使用。这一切都很好,但我使用了很多带有path的函数和语句,我认为它们可能要短得多。例如:Javascript 如何缩短长重复路径';s和combine语句,javascript,css,Javascript,Css,对于一个网站,我使用9种不同外观的标签,这些标签在不同的情况下使用。这一切都很好,但我使用了很多带有path的函数和语句,我认为它们可能要短得多。例如: function tabAon() { tabAvoor=tabAvoor+1; tabDrawer=tabDrawer+1; tabBvoor=0; tabCvoor=0; window.document.getElementById("tabA").style.textDecoration="none
function tabAon() {
tabAvoor=tabAvoor+1;
tabDrawer=tabDrawer+1;
tabBvoor=0;
tabCvoor=0;
window.document.getElementById("tabA").style.textDecoration="none";
window.document.getElementById("tabB").style.backgroundPosition="-87px -228px";
window.document.getElementById("tabB").style.color="#898f92";
window.document.getElementById("tabC").style.backgroundPosition="-190px -228px";
window.document.getElementById("tabC").style.color="#898f92";
window.document.getElementById("tabA").style.cursor="pointer";
if (tabDrawer==0) {
window.document.getElementById("header").MozTransform="translateY(0px)";
window.document.getElementById("header").msTransform="translateY(0px)";
window.document.getElementById("header").OTransform="translateY(0px)";
window.document.getElementById("header").WebkitTransform="translateY(0px)";
window.document.getElementById("header").transform="translateY(0px)";
window.document.getElementById("tabA").style.color="#898f92";
window.document.getElementById("tabA").style.backgroundPosition="0px 0px";
}
if (tabDrawer==1) {
window.document.getElementById("header").style.MozTransform="translateY(36px)";
window.document.getElementById("header").style.msTransform="translateY(36px)";
window.document.getElementById("header").style.OTransform="translateY(36px)";
window.document.getElementById("header").style.WebkitTransform="translateY(36px)";
window.document.getElementById("header").style.transform="translateY(36px)";
window.document.getElementById("tabAout").style.visibility="visible";
window.document.getElementById("tabBout").style.visibility="hidden";
window.document.getElementById("tabCout").style.visibility="hidden";
window.document.getElementById("tabA").style.color="#000000";
window.document.getElementById("tabA").style.backgroundPosition="0px -114px";
}
if (tabAvoor==2) tabAvoor=1;
if (tabDrawer==2 && tabBvoor==0 && tabCvoor==0) tabDrawer=0;
if (tabDrawer==2 && tabBvoor==1 || tabCvoor==1) tabDrawer=1;
}
使用JS框架怎么样?例如: 例如:
$('#tabBout').show();
而不是window.document.getElementById(“tabAout”).style.visibility=“visible” 通过为不同的ID定义一个变量,您可以稍微缩短代码:
var tabA = window.document.getElementById("tabA");
// window.document.getElementById("tabA").style.textDecoration="none";
tabA.style.textDecoration="none";
首先,您应该尝试使用jQuery的超级酷“$()”函数的某些版本,以缩短所有这些“window.document.getElementById”,即: 然后你可以这样做:
$("header").style.MozTransform="translateY(36px)";
(顺便说一句:你可以用$()做很多其他的好事情,比如返回整个对象数组……我在这里写的版本只是一个例子)
通过使用一些函数,您可以大大减少代码,例如:
function set_transforms(id,pos)
{
$(id).MozTransform="translateY("+pos+"px)";
$(id).msTransform="translateY("+pos+"px)";
$(id).OTransform="translateY("+pos+"px)";
$(id).WebkitTransform="translateY("+pos+"px)";
$(id).transform="translateY("+pos+"px)";
}
因此,您可以替换所有这些:
window.document.getElementById("header").style.MozTransform="translateY(36px)";
window.document.getElementById("header").style.msTransform="translateY(36px)";
window.document.getElementById("header").style.OTransform="translateY(36px)";
window.document.getElementById("header").style.WebkitTransform="translateY(36px)";
window.document.getElementById("header").style.transform="translateY(36px)";
仅此而已:
set_transforms("header",36);
希望有帮助 另外,将#头的css翻译放入一个类中,并添加/删除它,而不是将每个供应商前缀分别设置为tanks,这是我以前尝试过的,甚至是从您的代码中复制的,奇怪的是,我无法让它工作,尽管听起来很合理……谢谢大家,我要尝试一下。我想这就是我需要的!
set_transforms("header",36);