或者更一般地说,有没有办法在没有JQuery的情况下在javascript中为HTML元素添加任意CSS？
现在,这适用于Chrome,Firefox和IE 9/10.
var css = getRotationCSS(angle);
var div = document.getElementById('mydiv');
//div.css = css; ???
div.innerHTML = '<div style="'+css+'">HELLO</div>';
我必须在div中添加一个div才能获得style =''
我看到的所有例子都只有一个硬编码的角度,但我需要它可以在任何角度0-360工作,我应该制作360个班级,每个学位1个,然后设置课程吗？
function getRotationCSS(deg)
{
return "\
-webkit-transform: rotate("+deg+"deg); \
-moz-transform: rotate("+deg+"deg); \
-ms-transform: rotate("+deg+"deg); \
-o-transform: rotate("+deg+"deg); \
transform: rotate("+deg+"deg); \
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)'; \
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); \
";
}
是的IE 7/8代码不正确,我需要一个函数将度数转换为矩阵.
当我在我的IE 10中模拟IE 7/8时,IE 7/8代码也根本不旋转它.我搜索了代码,它应该将它旋转45:
<html>
<body>
<div style='border:1px solid green;margin:333px;padding:333px;'>
<div style="
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)\";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand');
">
HELLO
</div>
</div>
</body>
</html>
使用以下命令创建正确的旋转矩阵deg：
// First compute deg in radians
var rad = deg*Math.PI/180;
// Then when specifying the rotation matrices use:
'... M11=' + Math.cos(rad) +
', M12=' + -Math.sin(rad) +
', M21=' + Math.sin(rad) +
', M22=' + Math.cos(rad) + ' ...'
另外，ms-filter不要使用单引号，因为您在字符串中使用单引号将'auto expand'外部引号更改为双引号并正确转义它们：
-ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', ...
| 归档时间： |
|
| 查看次数： |
1351 次 |
| 最近记录： |