使用 css 更改 javascript 变量的宽度值答案

【问题标题】：Changing the width value of a javascript variable with css使用 css 更改 javascript 变量的宽度值
【发布时间】：2012-09-17 21:56:57
【问题描述】：

我的 javascript 中有以下代码：

var demoSlider_3 = Sliderman.slider({container: 'SliderName_3', 
                                     width: 167, 
                                     height: 250, 
                                     effects: effectsDemo3, 
                                     display: { autoplay: 4000 }
                                    });

我想要做的是在 CSS 文件中设置宽度和高度（我试图让它具有响应性）。

目前我还没有找到解决方案...
所以如果有人有线索，我会感谢你的帮助！

谢谢

【问题讨论】：

我可能会误解您要做什么，但是在 CSS 中定义样式并制作 Javascript switch style 而不是更好设置硬编码值？
"使用 css 更改 javascript 变量的宽度值" 您不能使用 CSS 设置脚本变量，因为后者不是脚本语言。

标签： javascript css variables width responsive-design

【解决方案1】：

您可以通过 CSS 设置初始宽度高度，并通过 JavaScript 从应该成为滑块的元素中读取它。使用内联样式、CSS 类或其他任何样式来设置元素的样式都没有关系。您只需要读取计算值并在滑块初始化中使用它们。

【讨论】：

【解决方案2】：

如果我想让我使用 JavaScript 添加到页面中的东西响应特定元素的尺寸，我通常会使用 width = '100%' height = '100%' 然后使用 css 定制我的包装元素，这样它具有定义的宽度和高度。

示例（为简单起见使用 jQuery）：

css:

.wrapper { width: 300px; height: 300px; }

js:

$(function(){
  var myElementToEmbed = $('<div />').css({width:'100%',height:'100%'});
  var targetWrapper = $('.wrapper');
  targetWrapper.append( myElementToEmbed );
});

dom:

<div class="wrapper"></div>

这样，JavaScript 处理功能性工作（应该如此），而 CSS 处理显示样式（应该如此）。

【讨论】：

……你还有一个无用的元素。如果您可以直接通过其 ID (SliderName_3) 设置滑块元素的样式，为什么要使用包装器？
... 因为您无法确切知道内部嵌入/插件将如何处理定义它的尺寸...如果您有 - 如 OP 所述 - 像 Sliderman.slider 这样的构造函数，如果你不要传递它可能使用默认值的尺寸信息，覆盖您在 CSS 中定义的那些（请不要提倡使用 !important）。定义一个包装元素几乎没有任何开销，它为您提供了额外的优势，您可以在 CSS 中轻松完成。显然，我上面的示例仅用于说明目的，您不会使用它来嵌入普通的旧 div 元素。
感谢大家的回归。我会测试你推荐给我的！ :-)