ホバー上のiframe内の要素の背景色を変更する

How do I change the background-color of elements in an <iframe>? The <iframe> is in my domain. Here is the complete code (HTML, PHP and jQuery):

<?php 

error_reporting(E_ALL ^ E_NOTICE); 

$url = $_GET['url']; 

if( ! empty($url)) 
{ 
    $data = file_get_contents($url); 

    $data = str_replace('<head>', '<head>', $data); 

    $data = preg_replace('#<script(.*?)>(.*?)</script>#is', '', $data); 
    $data = preg_replace('#<iframe(.*?)></iframe>#is', '', $data); 

    $data .=  
    ' 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
    $("div").each(function(i){ 
        if($(this).css("position") == "fixed") $(this).css("display", "none"); 
    }); 
    </script> 
    ' 
    ; 

    die($data);  
} 

?> 
 
 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta name="author" content="Webarto" /> 

    <title>AdriaMart</title> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
//function for xpath location
<script type="text/javascript">
    function getXPath(node, path) {
        path = path || [];
        if(node.parentNode) {
          path = getXPath(node.parentNode, path);
        }

        if(node.previousSibling) {
          var count = 1;
          var sibling = node.previousSibling
          do {
            if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName) {count++;}
            sibling = sibling.previousSibling;
          } while(sibling);
          if(count == 1) {count = null;}
        } else if(node.nextSibling) {
          var sibling = node.nextSibling;
          do {
            if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName) {
              var count = 1;
              sibling = null;
            } else {
              var count = null;
              sibling = sibling.previousSibling;
            }
          } while(sibling);
        }

        if(node.nodeType == 1) {
          path.push(node.nodeName.toLowerCase() + (node.id ? "[@id='"+node.id+"']" : count > 0 ? "["+count+"]" : ''));
        }
        return path;
      };

</script>

//function to get  xpath location and write in textfield in focus
<script>

    $(function() {
  var selectedtextbox;
  $('input[name="myinput"]').focus(function(){selectedtextbox=$(this);});
  $('#iframe').load(function(){
    $('body *', $(this).contents()).click(function (event) { 
      event.stopPropagation();
      event.preventDefault();
      var xpath = getXPath(this);
      selectedtextbox.val(xpath)
    });
  });
});
</script>
 

</head> 
<body> 

<!-- ... -->
<input id="iframe_url" name="" type="text" />
<input id="iframe_button" name="" type="button" />
<iframe id="iframe" src="?url=http://kupime.com"></iframe>

<script type="text/javascript"> document.getElementById('iframe_button').onclick = function() { document.getElementById('iframe').src = '?url=' + document.getElementById('iframe_url').value; }; </script> <!-- ... -->

Please click on title <input id="" name="myinput" type="text" value="">

Please click on Image <input id="" name="myinput" type="text" value="">

Please click on price <input id="" name="myinput" type="text" value="">

</body> </html>
2

2 答え

$("#id_of_element").css("backgroundColor","green");

id_of_elementを、色を変更したい要素のIDに置き換えます。色を変えて緑色にする必要があります。

3
追加された
$( "p、a、li、ul、div、img")css( "backgroundColor"、 "green");
追加された 著者 Derk Arts,
いいえ、これをすべて(p、a、li、ul、div、img、script)に実装したい
追加された 著者 Johny Source,
うまくいかない! :(... ...
追加された 著者 Johny Source,

CSSで:

#id_of_element:hover {
    backgroundColor: green
}
1
追加された
スクリプトには物理的なサイズはありません。あなたが必要とするものは実際には得られません。すべての要素が自分自身で、あるいはそれらのすべてを背景に変えなければなりませんか?最初のケースでは '#id_of_element'を 'p、a、li、ul、div、img'に置き換えます。後者の場合は 'body'
追加された 著者 SinistraD,
いいえ、これをすべて(p、a、li、ul、div、img、script)に実装したい
追加された 著者 Johny Source,
うまくいかない!私は理由を知らない
追加された 著者 Johny Source,