Get inline CSS property value even if its being overwritten

By : guub
Source: Stackoverflow.com
Question!

I have an element with inline CSS code in a 'style' attribute. I add a class to this element that overrides the inline styles using !important in a CSS stylesheet.

Question: How can I get an inline CSS property value even when it's overridden by CSS from a stylesheet?

When I use $("div").css("background-size"); It gets the value from the stylesheet CSS, not the inline CSS that's been overwritten.

By : guub


Answers

Because jQuery uses computedStyles to get the styles applied to elements. I believe that accessing the DOM element could be a "solution"

console.log(
  
  $('p').get(0).style.fontSize
  
);
p {
   font-size:20px !important; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p style="font-size:40px;">Hello World</p>

You can extend jQuery functions as well.

jQuery.fn.cssInline = function(prop) {
    
    var e = $(this[0]).get(0); // get DOM element
    // convert to camelCase; this may not be required.
    var propCamelCase = prop.replace(/-([a-z])/g, function (g) {
          return g[1].toUpperCase(); 
        });
  
    return e.style[propCamelCase];
  
};

console.log( $('p').cssInline('font-size') );
console.log( $('p').cssInline('fontSize') );
console.log( $('p').cssInline('width') );
p {
   font-size:20px !important; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p style="font-size:40px;">Hello World</p>

By : Adam Azad


Just a few amendments needed for div.homepage-popular-categories p selectors.

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    max-height: 20px;
    margin: auto;
    left: 0;
    right: 0;
}

Re-aligned Button:

.trending-button1{	
border-radius: 25px;
border: 3px solid #fff;
padding: 20px;
width: 200px;
height: 50;
}

/*banner overlay*/
div.homepage-popular-categories {
  position: relative;
  display: inline-block;
}

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    max-height: 20px;
    margin: auto;
    left: 0;
    right: 0;
}

div.homepage-popular-categories p:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
div.homepage-popular-categories p:hover {
  background: rgba(0,0,0,0);
}
/*end banner overlay*/


.new-arrivals{	
  background:url('https://s-media-cache-ak0.pinimg.com/originals/4f/a9/d1/4fa9d18c567a8c5a05997a9773685361.jpg') no-repeat;	
  width:313px;	
  height:313px;
}

.trending{
  background:url('http://socialmediaoutcomes.com/go/wp-content/uploads/2013/08/successful-business-people-smiling.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}

.shop-by-goal{
  background:url('https://brianpshea.files.wordpress.com/2013/06/4234255-group-of-business-people-smiling-together-in-an-office.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}


.strov-3-banners{	
	margin-top:15px;	
	text-align: center;	
	-webkit-box-sizing: border-box;	
	-moz-box-sizing: border-box;	
	-ms-box-sizing: border-box;	
	-o-box-sizing: border-box;    
	box-sizing: border-box;    
	padding:10px 0;
}
<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories ">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories ">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories ">
    <p>NEW ARRIVALS</p>
  </div>
</a>

Updated Fiddle: https://jsfiddle.net/vct6dsu6/13/


Fullcover overlay code snippet example:

div.homepage-popular-categories .trending-button1 {
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 65px;
    margin: auto;
    box-sizing: border-box;
    max-width: 200px;
}

/*banner overlay*/
div.homepage-popular-categories {
  position: relative;
  display: inline-block;
}

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
}

div.homepage-popular-categories p:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
div.homepage-popular-categories:hover p {
    background: rgba(0,0,0,0);
}
/*end banner overlay*/


.new-arrivals{	
  background:url('https://s-media-cache-ak0.pinimg.com/originals/4f/a9/d1/4fa9d18c567a8c5a05997a9773685361.jpg') no-repeat;	
  width:313px;	
  height:313px;
}

.trending{
  background:url('http://socialmediaoutcomes.com/go/wp-content/uploads/2013/08/successful-business-people-smiling.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}

.shop-by-goal{
  background:url('https://brianpshea.files.wordpress.com/2013/06/4234255-group-of-business-people-smiling-together-in-an-office.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}


.strov-3-banners{	
	margin-top:15px;	
	text-align: center;	
	-webkit-box-sizing: border-box;	
	-moz-box-sizing: border-box;	
	-ms-box-sizing: border-box;	
	-o-box-sizing: border-box;    
	box-sizing: border-box;    
	padding:10px 0;
}
<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories ">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories ">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories ">
    <p>NEW ARRIVALS</p>
  </div>
</a>

I'm not entirely sure what you plan on doing with the hover effects, so I'll leave that up to you to refine, but the snippet below will provide some examples to consider.


Overlay hover effects

Reveal and remove alternative on-hover demonstrations.

div.homepage-popular-categories .trending-button1 {
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 65px;
    margin: auto;
    box-sizing: border-box;
    max-width: 200px;
    background: transparent;
}

/*banner overlay*/
div.homepage-popular-categories {
  position: relative;
  display: inline-block;
}

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
}

div.homepage-popular-categories p:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
div.homepage-popular-categories:hover p {
    background: rgba(0,0,0,0);
}
/*end banner overlay*/


.new-arrivals{	
  background:url('https://s-media-cache-ak0.pinimg.com/originals/4f/a9/d1/4fa9d18c567a8c5a05997a9773685361.jpg') no-repeat;	
  width:313px;	
  height:313px;
}

.trending{
  background:url('http://socialmediaoutcomes.com/go/wp-content/uploads/2013/08/successful-business-people-smiling.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}

.shop-by-goal{
  background:url('https://brianpshea.files.wordpress.com/2013/06/4234255-group-of-business-people-smiling-together-in-an-office.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}


.strov-3-banners{	
	margin-top:15px;	
	text-align: center;	
	-webkit-box-sizing: border-box;	
	-moz-box-sizing: border-box;	
	-ms-box-sizing: border-box;	
	-o-box-sizing: border-box;    
	box-sizing: border-box;    
	padding:10px 0;
}

/* On Hover Overlay Remove */
div.homepage-popular-categories.overlay-remove .trending-button1 {
    margin-bottom: 50px;
}

div.homepage-popular-categories.overlay-remove:hover .trending-button1 {
    margin-bottom: -150px;
}

div.homepage-popular-categories.overlay-remove {
    overflow: hidden;
}

div.homepage-popular-categories.overlay-remove:hover p {
    color: transparent;
}

/* On Hover Overlay Reveal */
div.homepage-popular-categories.overlay-reveal:hover p {
    background: rgba(0,0,0,0.5);
    color: #eeeeec;
}

div.homepage-popular-categories.overlay-reveal p {
    position: absolute;
    color: transparent;
    background: rgba(0,0,0,0);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
}

div.homepage-popular-categories.overlay-reveal .trending-button1 {
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 65px;
    margin: auto;
    box-sizing: border-box;
    max-width: 200px;
    margin-bottom: -150px;
}

div.homepage-popular-categories.overlay-reveal:hover .trending-button1 {
    margin-bottom: 50px;
    background: transparent;
}

div.homepage-popular-categories.overlay-reveal {
    overflow: hidden;
}
<h2>Overlay Remove</h2>
<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories overlay-remove">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories overlay-remove">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories overlay-remove">
    <p>NEW ARRIVALS</p>
  </div>
</a>

<hr>
<h2>Overlay Reveal</h2>
<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories overlay-reveal">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories overlay-reveal">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories overlay-reveal">
    <p>NEW ARRIVALS</p>
  </div>
</a>



that would change the height of your box and align it center

    .trending-button1{  
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    width: 200px;
    max-height: 20px;
    margin:0 auto;
    }
By : kdskii


This video can help you solving your question :)
By: admin