javascript - 如何给Jquery函数添加高度和宽度

标签 javascript jquery html css

我正在使用在网上为我的票务软件找到的 jquery 脚本。它增加了将视频添加到 WIKI 的功能。问题是它没有为视频设置高度或宽度,是否可以使用此代码完成?

if ($('#idEditArticle')) {
    var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
    $.each(videos, function(i, video) {
        $(video).parent().prepend('<video src="'+$(video).attr('href')+'" controls></video><br/>');
    });
}

这里是html格式的输出

<p>
<a border="0" class="fb_attachment" href="default.asp?pg=pgDownload&amp;pgType=pgWikiAttachment&amp;ixAttachment=136818&amp;sFileName=Paragon%20Invoice%203.mp4" rel="nofollow" title="">Paragon Invoice 3.mp4</a></p>

即使可以手动将其添加到 html 中。我无法向元素添加内联 css。我尝试将它包装到一个 div 中,但它不会采用内联样式,它只会在提交时将其删除。

我可以在 jquery 代码中添加高度和宽度以自动设置视频的高度和宽度吗?

最佳答案

这应该有效。请注意我正在使用 max-width但任何风格都可以。

if ($('#idEditArticle')) {
    var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
    $.each(videos, function(i, video) {
        // Added a style attribute here.
        $(video).parent().prepend('<video src="'+$(video).attr('href')+'" controls style="max-width: 100%;"></video><br/>');
    });
}

更清晰(从编码的 Angular 来看)的方式是:

if ($('#idEditArticle')) {
    // Search for all matching elements. Returns an array of jQuery objects.
    var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
    // Simply use the array.each to iterate over the preceeding array.
    videos.each(function(){
        // now create a link, video and source element
        var link   = $(this);
        var video  = $('<video />');
        var source = $('<source />').attr('src', link.attr('href'));
        // append the element correctly to create a tree
        video.append(source);
        // Heres where you apply multiple style elements
        video.css({'max-width':'100%'});
        // prepend the tree to the desired location
        link.parent().prepend(video);
    });
}

实现有效(可能在 < source /> 中有一个额外的空间 - 它应该是 <source />:

        // Search for all matching elements. Returns an array of jQuery objects.
        var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
        // Simply use the array.each to iterate over the preceeding array.
        videos.each(function(){
            // now create a link, video and source element
            var link   = $(this);
            var video  = $('<video />');
            var source = $('<source />').attr('src', link.attr('href'));
            // append the element correctly to create a tree
            video.append(source);
            video.css('max-width','100%');
            // prepend the tree to the desired location
            link.parent().prepend(video);
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<a href="test.mp4">Test</a>

关于javascript - 如何给Jquery函数添加高度和宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31410700/

相关文章:

jquery - jQuery 和不同浏览器的问题

javascript - 如何使用javascript获取字符串中的匹配索引?

javascript - 有没有办法知道页面上次重绘是什么时候?

javascript - 如何查看用户是否点击了两个元素?

javascript - Knockout js 禁用引导日期选择器中所选日期的过去日期

javascript - onclick 函数在 JavaScript 中不起作用

html - 使用文本对齐时 div 之间的空间

javascript - mouseover() mouseout() jQuery 添加/删除类问题

JavaScript变量定义困惑

javascript - 在 jQuery 中阻止前一个事件完成之前触发另一个事件?