javascript - 使用 JavaScript 添加额外的 CSS

Question

我正在编码的页面上有这张图片，它应该根据一些变量调整大小并水平和垂直居中。我不能为此使用 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);
});

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

Answer 1

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