使用 javascript 添加额外的 CSS答案

【问题标题】：Adding extra CSS with javascript使用 javascript 添加额外的 CSS
【发布时间】：2009-08-18 10:56:43
【问题描述】：

我正在编码的页面上有这张图片，应该根据一些变量调整大小并水平和垂直居中。我不能为此使用 CSS 表，因为宽度和高度变量是动态的。因此，我想让 javascript 为这个特定图像的样式添加两个额外的参数（顶部和左侧）。

我试过这个（在我看来这很明智）

function getStyleSheet() {
    for(var i=0; i<document.styleSheets.length; i++) {
        var sheet = document.styleSheets[i];
        if(sheet.title == 'StyleSheet') {
            return sheet;}
    }
}
var rule_sheet = getStyleSheet();
function changeText() {
    rule_sheet.insertRule(".className { top:" (-(.5*newHeight))+ "; left:" +(-(.5*newWidth))+ ";}");
    showRules();
}

我也尝试向图像添加内联样式，如下所示：（在调整图像大小的函数中）

$(this).style.top= (-(.5*newHeight));
$(this).style.left= (-(.5*newWidth));

这两种解决方案都不起作用，而对我来说，这两种方法似乎都是可行的。我错过了什么？

编辑：我意识到我没有在其中添加后缀“px”，但是这样做之后，它仍然不起作用:(

编辑二：在 NickFitz 提示后，我将最后一段代码重写为：

$(".className").each(function() {
    $(this).css("top", (-(.5*newHeight)), 2);
    $(this).css("left", (-(.5*newWidth)), 2);
});

这确实改变了它的外观。不是我想要的方式，但至少我离解决方案有点近了。

【问题讨论】：

图像居中的代码也是错误的。 {左：50%；顶部：0.5*高度； margin-left: .5*width;} 是正确的方法。不过没关系。

标签： javascript jquery css

【解决方案1】：

如果您使用 jQuery，则需要 CSS-related methods。 $(this) 返回一个 jQuery 对象，设置 style 属性不会做任何事情。

【讨论】：

好的，谢谢。我还没有尝试过。但仍然没有解决方案，我编辑了第一篇文章以反映这一最新变化。

【解决方案2】：

试试这个：

$(this).css( 'top', (-(.5*newHeight))+'px' );
$(this).css( 'left', (-(.5*newWidth))+'px' );

【讨论】：

【解决方案3】：

您应该尝试类似（在变量末尾使用 val）

$(this).css({top: topval + "px", left : leftval + "px", width : widthval + "px", height : heightval + "px"});

或者你可以使用：

$(this).width(widthval);

【讨论】：

是的，当我再次尝试时，我意识到我忘记了 px。但无济于事，仍然坏掉:(我用另一种方法编辑了第一篇文章。
查看第一个代码块，您尝试更改所有具有“className”类的项目。尝试使用 $(".className") 而不是 $(this)

【解决方案4】：

您能否只获取一个包含<img> 的包装集，然后使用.css() 命令为其设置适当的值？

$('#img').css({ 'width' : calculatedWidth + 'px', 'height' : calculatedHeight + 'px' });

【讨论】：

是的，这就是我需要的:)