将 CSS3 应用于 PHP DOMDocument答案

【问题标题】：Applying CSS3 to PHP DOMDocument将 CSS3 应用于 PHP DOMDocument
【发布时间】：2013-12-15 17:10:45
【问题描述】：

我正在尝试将 CSS 应用于通过 PHP 创建的 DOMDocument。但是，即使我使用 jQuery 来应用样式，它也不起作用。这是我的一个例子：

<div id="content">
<p class="intro">Below are some of the YouTube videos I've made.
    <br />Feel free to take a look!</p>
<div id="video-content">
    <?php include '../resources/php/functions.php';
            $functions=new Functions;
            $functions->getVideos();
    ?>
    <script type="text/javascript">
        $(window).load(function() {
            $('iframe-video').css({
                "margin-left": "auto"
            });
            $('iframe-video').css({
                "margin-right": "auto"
            });
            $('iframe-video').css({
                "margin-bottom": "35px"
            });
        });
    </script>
</div>

$functions->getVideos();成功返回视频，并显示。他们还被赋予了 iframe-video 类。但是，上面的 CSS 实际上并不适用于它。

如何更改 PHP DOMDocument 生成的元素的 CSS？

PHP代码如下：

public function getVideos() {
        $doc = new DOMDocument;
        libxml_use_internal_errors(true);
        $doc->loadHTMLFile('http://www.youtube.com/user/HathorArts/videos');
        libxml_use_internal_errors(false);

        $xpath = new DOMXPath($doc);
        $nodes = $xpath -> query('//a[@class="ux-thumb-wrap yt-uix-sessionlink yt-uix-contextlink yt-fluid-thumb-link contains-addto "]');

        // Get the URLS for the videos, and build the iFrames for them.
        $output = new DOMDocument;
        foreach($nodes as $i => $node) {
            // Creates the video URL for the iFrame
            $temp_url = $node->getAttribute('href');
            $replace_url = str_replace("/watch?v=", "", $temp_url);
            $video_url = ("//www.youtube.com/embed/" . $replace_url . "?rel=0");

            // Builds the iFrme
            $iframe = $output->createElement('iframe');
            $iframe->setAttribute('class', 'iframe-video');
            $iframe->setAttribute('width', '560');
            $iframe->setAttribute('height', '315');
            $iframe->setAttribute('src', $video_url);
            $iframe->setAttribute('frameborder', "0");

            // Outputs the iFrame
            $output->appendChild($iframe);
        }

        // Sends the output to the index file
        echo $output -> saveHTML();
    }

【问题讨论】：

$('iframe-video') 应该是$('.iframe-video') ???

标签： php jquery css dom domdocument

【解决方案1】：

如果您有 CSS 文件，只需添加 .iframe-video 的属性。 PHP 与 CSS 无关，只有 HTML 输出。

【讨论】：

有了这个，margin-bottom 工作，但是 margin-left 和 margin:right auto;不起作用。
我找到了专门使用这些样式的解决方法。

【解决方案2】：

在脚本代码中更改几行；然后它将起作用：

<script type="text/javascript">
    $(document).ready(function() {
        $('.iframe-video').css({
            "margin-left": "auto"
        });
        $('.iframe-video').css({
            "margin-right": "auto"
        });
        $('.iframe-video').css({
            "margin-bottom": "35px"
        });
    });
</script>

这肯定行得通。

【讨论】：

【解决方案3】：

您应该像这样在页面加载后延迟 JavaScript 代码：

window.onload = function () { ... }

【讨论】：