2015-12-24 2 views
0

EDIT: Я уже пробовал removeAttr, addClass, removeClass, изменяя непрозрачность ... В основном обычные сценарии jQuery для изменения встроенного CSS НЕ РАБОТАЮТ здесь!jQuery для изменения встроенного CSS элемента внутри DOM

Сайт находится в http://thehungrygeek.com

enter image description here

К сожалению фона устанавливается с помощью! Важно встроенным CSS элемента, расположенный внутри DOM.

Встроенный CSS элемент кода выглядит следующим образом:

<div class="shareaholic-share-button-container" ng-click="sb.click()" style="color:#000000 !important; 
      background:#fafafa !important; // the purpose is to remove this line 
      opacity: 1.00 !important;"> 
      <span class="share-button-counter ng-binding" style="color:#000000 !important; 
       background:#fafafa !important; // and this line 
       opacity: 1.00 !important;">0</span> 
      <div class="share-button-sizing" ng-style="config.customColorsEnabled &amp;&amp; config.appName === 'floated_share_buttons' ? config.customColors : {}" style="color: rgb(0, 0, 0); opacity: 1; background: rgb(250, 250, 250);"> 
       <i class="shareaholic-service-icon service-facebook" ng-style="config.customColorsEnabled ? config.customColors : {}" style="color: rgb(0, 0, 0); opacity: 1; background: rgb(250, 250, 250);"></i> 
       <span class="share-button-verb ng-binding" style="color:#000000 !important"> 
       <b class="ng-binding">Share</b> 

      </span> 
      </div> 
</div> 

Этот код не может рассматриваться с «источником зрения», но вы увидите, если вы проверяете кнопки акции как на изображении выше. Элемент находится внутри DOM.

элемент, вероятно, вызывается этой строки в HTML-коде:

<script type='text/javascript' src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js' data-shr-siteid='82ff342d6c171e823bc5c49c19bf1b59' data-cfasync='false' async='async'> 
</script> 

Есть ли способ использовать JQuery изменить встроенный CSS элемента внутри DOM?

До сих пор обычные JQuery .css() не работает, я пробовал:

<script type="text/javascript"> 
    jQuery(window).ready(function(){ 
    jQuery(".shareaholic-share-button-container").css("background", "rgba(0,0,0,0)"); 
    jQuery(".share-button-counter").css("background", "rgba(0,0,0,0)"); 
}); 
</script> 

Я также попытался removeAttr, addClass, removeClass, изменяя непрозрачность ...

И много других подобных итераций обычного кода. Я также пробовал предложения, найденные по адресу How to override css containing '!important' using jquery?

В основном обычные сценарии jQuery для изменения встроенного CSS НЕ РАБОТАЮТ здесь!

Проблема заключается в использовании jQuery для таргетинга на элемент внутри DOM. Есть ли способ сделать это?

Заранее спасибо :)

+0

ваша страница имеет Jquery неопределенную ошибку. –

+0

Вы не можете сделать это прямо в AngularJS? Почему вы хотите использовать jQuery? Если у вас нет доступа к DOM, попробуйте 'document.querySelector().style = ''; ' – Hitmands

+0

Потому что я не могу изменить встроенный CSS, вставленный плагином. Не могли бы вы рассказать об этом решении? Не знаю, как это реализовать –

ответ

2

Поскольку вы используете JQuery, вы можете сначала использовать метод removeAttr(), чтобы удалить атрибут стиля затем применить CSS.

jQuery(window).ready(function() { 
    jQuery(".shareaholic-share-button-container,.share-button-counter").removeAttr('style').css("background", "green"); 
}); 

WORKING DEMO

Это просто демо, вы можете внести изменения по мере необходимости. Также предпочитают использовать addClass & removeClass

+0

Не работает для меня. Как указано в вопросе, элемент находится внутри DOM только так, что обычные сценарии jQuery для его модификации не работают. Я уже ранее пробовал все ваши другие предложения. Ваше текущее предложение находится в прямом эфире на сайте. –

+0

Я только что проверил DOM, есть свойство css 6px. Итак, если u проверить внутренний div, то он полностью вне его родительского div, иначе нет смысла, чтобы он не работал – brk

+0

Простите, я не понимаю вас о внутреннем div и родительском div? Свойство CSS 6px было добавлено плагином и может быть непосредственно изменено на бэкэнд. –

1

Вы можете просто установить opacity на 0, чтобы фон был прозрачным.

jQuery(window).ready(function() { 
    jQuery(".shareaholic-share-button-container,.share-button-counter").css("opacity", "0"); 
}); 
+0

К сожалению, обычные модификации jQuery не работают, поскольку элемент находится только в DOM. –

0

Если классы CSS не играют с прокладкой и краем, то вы можете попробовать это клещевого

jQuery(window).ready(function() { 
    jQuery(".shareaholic-share-button-container").html("<div style='background: black'>"+ jQuery(".shareaholic-share-button-container").html() +"</div>"); 
    jQuery(".share-button-counter").html("<div style='background: black'>"+ jQuery(".share-button-counter").html() +"</div>"); 
});