jQuery css ('transform') возвращает none

Я работаю над пользовательским приложением дизайна. Он имеет четыре изображения, которые имеют свойство преобразования, прикрепленное к нему из-за масштаба и положения перетаскивания.jQuery css ('transform') возвращает none

Когда я пытаюсь получить доступ к этому свойству с помощью jQuery, он возвращает none для первых 3, но последний показывает значение, хотя все они имеют значение, связанное с ним.

В случае, если я опробоваюсь с 2 или 3 изображениями, также он возвращает значение только в последний раз, когда я требую для всех них.

Заранее благодарим за любую помощь по этому запросу, поскольку я работаю над решением этой проблемы в течение многих дней, но не добился успеха.

<script> 
function generate preview(){ 
var design_type=$("#block_id").val(); 
if((design_type=="single")||(design_type=="double")||(design_type=="three")||(design_type=="four")){ 
       var image1=$('#design_block_'+design_type+' #droppable1 img').attr('id'); 
       var img_src1=$('#'+image1).attr('src'); 
       var org_img_src1=$('#'+image1+'_main_image').val(); 
       var current_angle1=$('#'+image1+'_angle').val(); 
       var current_effect1=$('#'+image1+'_effect').val(); 
       var image_transform1=$('#'+image1).css('transform'); 
       alert(image_transform1); 
      } 

      if((design_type=="double")||(design_type=="three")||(design_type=="four")){ 
       var image2=$('#design_block_'+design_type+' #droppable2 img').attr('id'); 
       var img_src2=$('#'+image2).attr('src'); 
       var org_img_src2=$('#'+image2+'_main_image').val(); 
       var current_angle2=$('#'+image2+'_angle').val(); 
       var current_effect2=$('#'+image2+'_effect').val(); 
       var image_transform2=$('#'+image2).css('transform'); 
       alert(image_transform2); 
      } 

      if((design_type=="three")||(design_type=="four")){ 
       var image3=$('#design_block_'+design_type+' #droppable3 img').attr('id'); 
       var img_src3=$('#'+image3).attr('src'); 
       var org_img_src3=$('#'+image3+'_main_image').val(); 
       var current_angle3=$('#'+image3+'_angle').val(); 
       var current_effect3=$('#'+image3+'_effect').val(); 
       var image_transform3=$('#'+image3).css('transform'); 
       alert(image_transform3); 
      } 

      if(design_type=="four"){ 
       var image4=$('#design_block_'+design_type+' #droppable4 img').attr('id'); 
       var img_src4=$('#'+image4).attr('src'); 
       var org_img_src4=$('#'+image4+'_main_image').val(); 
       var current_angle4=$('#'+image4+'_angle').val(); 
       var current_effect4=$('#'+image4+'_effect').val(); 
       var image_transform4=$('#'+image4).css('transform'); 
       alert(image_transform4); 
      } 
} 
</script> 
<body> 
<div id="design_block_four" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; display: inline-block; z-index: 90;"> 
<div style="width:49%; height:100%; float:left; border-right:2px solid #000000;position:relative;"> 
<div style="width:100%; height:49%; float:left; border-bottom:2px solid #000000;position:relative;"> 
<div style="overflow: hidden;" id="droppable1" class="drop ui-droppable"><img style="transform: matrix(1, 0, 0, 1, -100, -53); cursor: move; transition: none 0s ease 0s ;" src="user_img/22080_work.jpg" class="dropped" id="dropped_407853"></div> 
</div> 
<div style="width:100%; height:50%; float:left;position:relative;"> 
<div style="overflow: hidden;" id="droppable2" class="drop ui-droppable"><img style="transform: matrix(1, 0, 0, 1, -98, -113); cursor: move; transition: none 0s ease 0s ;" src="user_img/20540_work.jpg" class="dropped" id="dropped_29179"></div> 
</div></div> 
<div style="width:50%; height:100%; float:right;position:relative;"> 
<div style="width:100%; height:49%; float:left; border-bottom:2px solid #000000;position:relative;"> 
<div style="overflow: hidden;" id="droppable3" class="drop ui-droppable"><img style="transform: matrix(1, 0, 0, 1, -73, -133); cursor: move; transition: none 0s ease 0s ;" src="user_img/11241_work.jpg" class="dropped" id="dropped_544668"></div> 
</div> 
<div style="width:100%; height:50%; float:left;position:relative;"><div style="overflow: hidden;" id="droppable4" class="drop ui-droppable"><img style="transform: matrix(1, 0, 0, 1, -114, -115); cursor: move; transition: none 0s ease 0s ;" src="user_img/11070_work.jpg" class="dropped" id="dropped_542637"></div></div></div> 
</div></body>

Приведенный выше код имеет 4 IMG-теги и все они имеют разные свойства преобразования, но JavaScript возвращает код для юдоли только в прошлом один и остальные возвращаются как никто.

С уважением Anoop

источник

2013-12-17 Anoop

Просьба предоставить нам некоторые соответствующие образцы кода. – Pankucins

Попробуйте один:

getComputedStyle($('[element selector]'))['-webkit-transform'];

источник

2013-12-17 08:31:47

он также дает ту же проблему – Anoop

, может быть, потому, что для свойства transform действительно нет значения? –

Если вы проверите пример кода выше в моем исходном сообщении, вы обнаружите, что свойство transform имеет значение. – Anoop

В моем случае это происходит потому, что он рассматривается как атрибут стиля, так $(selector).attr('style') возвращает всю строку стиля. По-прежнему пытается выяснить, почему это не считается вычисленным стилем. D3.js имеет такое же поведение.

источник

2015-02-02 11:52:24

jQuery css ('transform') возвращает none

ответ

Смежные вопросы