2

要素のレンダリングされたスタイルを取得します （インラインCSSも処理できる必要があります）

私はのこぎりを学び、IDまたはクラスに基づいてノードを選択する方法を理解しています。ただし、ノード/要素を選択して、継承されたスタイルを含む、それに割り当てられた特定のCSSスタイルを取得したいと思います。

CSSスタイルシート：

<head>
  <style type="text/css">
    .myfont {font-family: Times New Roman: font-size: 80% }
    .bold {font-weight: bold}
    .50_font_size { font-size:50% }
   </style>
 </head>

HTML：

<Body>
   <div id="article1" class="myfont">
      <div id="title1" class="bold">  
          My Title Text
          <div id="author1" class="50_font_size">
             By First Name Last Name
          </div>
      </div>
        General article text. General article text. General article text.        
      </div>
   </div>

上記の例では、使用したいと思います...

require "nokogiri"
document=Nokogiri.HTML(HTML_String)

#Hoping for something like the following:
author_css = node.css_style("author1") 
puts author_css
#=>  {font-family=>"Times New Roman",
#=>   font-weight=> "bold",
#=>   font-size=> 50%}

ご覧のとおり、要素の正しいCSSを取得できるように、継承されたアイテムを出力する必要があります。この結果を得る最良の方法は何ですか？

4

1 に答える 1

5

のこぎりだけではできません。CSS_Parserを使用すると、不足している部分が提供されます。

require 'nokogiri'
require 'css_parser'
include CssParser

html = <<END_HTML
<head>
  <style type="text/css">
    .myfont {font-family: Times New Roman: font-size: 80% }
    .bold {font-weight: bold}
    .50_font_size { font-size:50% }
  </style>
</head>
<body>
  <div id="article1" class="myfont">
      <div id="title1" class="bold">  
          My Title Text
          <div id="author1" class="50_font_size">
            By First Name Last Name
          </div>
      </div>
        General article text. General article text. General article text.        
      </div>
  </div>
</body>
END_HTML

doc = Nokogiri::HTML(html)
css = doc.at('style').text

parser = CssParser::Parser.new
parser.add_block!(css)

author_div = doc.at('div#author1')
puts parser.find_by_selector('.' + author_div['class'])

どの出力:

font-size: 50%;

継承された CSS を取得するには、ドキュメントの上部から開始し、目的のノードまで掘り下げて、親ノードの設定がターゲット ノードに影響を与えるかを把握する必要があります。

于 2013-01-29T04:32:31.460 に答える