css('width','xxz')为什么不能执行? /*xxz是事先定义好的*/

x_hola
  • 664

我在用jquery插件imgAreaSelect,这是一个网页截图插件。

我想改变第二张图片(class=2)的宽度时,发现css('width','800px')是可以执行的,css('width','xxz')是不能执行的/xxz是定义的变量,在下面/。alert(xxz)也可以正确执行。

把css属性换成其他的也是这样————都可以把属性改成固定值,但不能改成定义好的变量。

为什么会这样?我该怎么做?
万分感谢。

<link rel="stylesheet" type="text/css" href="imgareaselect-default.css" />
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.imgareaselect.pack.js"></script>
  <script>
    $(document).ready(function () {
        $('.x1').imgAreaSelect({ 
            maxWidth: 200, 
            maxHeight: 150,
            handles: true ,
            onSelectEnd: function (img, selection) { 
                var select_width = selection.width;
                var select_height = selection.height;
                var select_x1 = selection.x1;
                var select_y1 = selection.y1;
                var select_x2 = selection.x2;
                var select_y2 = selection.y2;
                var shadow_width_scale = 100 / ( select_width || 1 );
                var xxz = shadow_width_scale * 500;
                $('.x2').css('width','xxz');            
                alert(xxz);
                } 
         });
     });

  </script>
 <style>
*{margin:0;padding:0;border:10px;}
.pic-area{width:500px;height:500px;}
 .pic-area img{width:500px;height:500px;}
.view-area{width:100px;height:100px;border:10px solid red;position:absolute;}
 .view-area img{width:500px;height:500px;position:absolute;
    margin-left:110px;
 }
 </style>
 </head>
 <body>
    <div class='area'>
        <div class='pic-area'>
            <img class='x1' src='x1.gif' />
        </div>
        <div class='view-area'>
            <img class='x2' src='x1.gif' />
        </div>
    </div>
 </body>
评论
阅读 2.3k
4 个回答

加引号后就不再是变量而是字符串了,而且不是表示宽高的有效字符串,当然就没有效果了。去掉引号就行了。

去掉xxz的引号,这样他就是变量,就会等于计算出来的数字,加引号表明width:xxz这样肯定无效

楼上说的很清楚了,加引号表示字符串,不加才是一个变量名,这时才可以随意改变这个变量值

变量不需要加引号,否则就变成字符串了

宣传栏