我正在使用这个CSS类:
.turn90{
-moz-transform: rotate(90deg); /* FF3.5+ */
-o-transform: rotate(90deg); /* Opera 10.5 */
-webkit-transform: rotate(90deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 */
}
通过:
document.getElementById("advancedsearchtoggle").className += " turn90";
在Firefox和Opera中它能够正常工作,但在Safari或Chrome中不能。 (尚未尝试IE)
我做错了什么?
完整的JavaScript函数:
var expanded=0;
function searchparts(n)
{
if(expanded == 0){
document.getElementById('search2').style.visibility = 'visible';
document.getElementById('search3').style.visibility = 'visible';
document.getElementById('search2').style.display = 'block';
document.getElementById('search3').style.display = 'block';
//window.scrollTo(0,findPos(document.getElementById('search'+n))-60);
document.getElementById("advancedsearchtoggle").className += " turn90";
document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';
expanded = 1;
}else if(expanded == 1){
document.getElementById('search2').style.visibility = 'collapse';
document.getElementById('search3').style.visibility = 'collapse';
document.getElementById('search2').style.display = 'none';
document.getElementById('search3').style.display = 'none';
window.scrollTo(0,findPos(document.getElementById('search1'))-60);
document.getElementById("advancedsearchtoggle").className = " ";
document.getElementById('advancedsearchtoggle').style.webkitTransform = 'rotate(-90deg)';
expanded = 0;
}
}
这是触发JavaScript的HTML代码:
<a class="plain" onclick="searchparts(2);" style="margin-right:20px;"><span style="text-decoration:underline;">Erweiterte Suche</span> <span id="advancedsearchtoggle" style="text-decoration:none;">»</span></a>
正如您所看到的,即使在放置
标签时
,HTML文档也需要遵循语法规则。document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';
直接将其放入javascript中是不起作用的。当我检查“advancedsearchtoggle”时,我可以看到类被正确应用(以及我放入类中的任何其他css)。只有旋转在Safari和Chrome中似乎无法工作。