Jquery：获得CSS或样式

Question

我猜这有明显的错误：

var elem = document.getElementById("homepage-mobile-cat1"); 
console.log(elem);

var test1 = elem.style("margin-left");
var test2 = elem.css("margin-left");

这将返回elem.style或elem.css函数不存在。

console.log的输出是

<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
  <a href="http://www.example.co.uk/literacy/">
    <div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;">  Literacy Resources</span></p></div> <!-- CSSTable homepage-cat-text -->
  </a>        
</div>

Answer 1

style不是javascript中的函数.elem.style.marginLeft会给出值

var elem = document.getElementById("homepage-mobile-cat1");
var test1 = elem.style.marginLeft;
console.log(test1)

<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style=" margin-left: 0 !important;">
  <a href="http://www.example.co.uk/literacy/">
    <div class="CSSTable homepage-cat-text" style="">
      <p><span style="width:80%; display:block !important;margin:0 auto;">  Literacy Resources</span></p>
    </div>
    <!-- CSSTable homepage-cat-text -->
  </a>
  </div>

css是一个jquery方法，它将与jquery对象一起使用

console.log($("#homepage-mobile-cat1").css("margin-left"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
  <a href="http://www.example.co.uk/literacy/">
    <div class="CSSTable homepage-cat-text" style="">
      <p><span style="width:80%; display:block !important;margin:0 auto;">  Literacy Resources</span></p>
    </div>
    <!-- CSSTable homepage-cat-text -->
  </a>
  </div>

Answer 2

试试jquery：

alert($('#homepage-mobile-cat1').css('margin-left'));

Answer 3

var elem = document.getElementById("homepage-mobile-cat1"); 


// You can use this method to calculate the style
var test1 = window.getComputedStyle(elem).getPropertyValue("margin-left");
console.log(test1);


//Or directly get the value from style. But this requires the property value to be already assigned to the style. If not, use the method above.
console.log(elem.style.marginLeft);

//Or alternatively, you can use JQuery
console.log($("#homepage-mobile-cat1").css("margin-left"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="



     margin-left: 0 !important;"><a href="http://www.example.co.uk/literacy/">
      <div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;">  Literacy Resources</span></p></div> <!-- CSSTable homepage-cat-text --></a>



      </div>

Answer 4

试试elem.style.marginLeft。

var elem = document.getElementById("homepage-mobile-cat1"); 
console.log(elem);

var test1 = elem.style.marginLeft;
console.log(test1);

<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
  <a href="http://www.example.co.uk/literacy/">
    <div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;">  Literacy Resources</span></p></div> 
  <!-- CSSTable homepage-cat-text -->
  </a>

</div>