根据 Javascript 是否存在 ALT 属性执行操作

Question

我有一些 javascript 可以查看正文并找到单词，如果存在的话，它会输出一个 div。这对很多事情都很有用，但是...

我还需要查看页面的正文和所有 ALT 标记。

我发现了这个：Use javascript to hide element based on ALT TAG only? 这似乎改变了 ALT 属性，但是我想执行一个操作。

到目前为止，这是我的 JS。

var bodytext = $('body').text();
    if(bodytext.toLowerCase().indexOf('one' || 'two')==-1)

return; 
    var elem = $("<div>Text Here</div>");

谢谢。

P.S。我是 JS 的 N00B/ 相对较新，我正在为一个小项目做这个，所以我不确定在 JS 函数方面从哪里开始。

Answer 1

您正在使用 jQuery 库，您可以 select 元素的属性，例如：

   $('[alt="one"]').each(function(el){
        // do something
        var x = $(el).arrt('alt');
    });

如果你使用select或$('[alt]')你可以获得设置了这个属性的元素，然后如果你有更复杂的selection检查元素的值。

你必须改变你的 return，因为你不能把 div 放在 ALT 标签里，它没有用。

这是您的预期输出。

更新

如果您想更改页面中的所有图像和视频，使用 jquery 的方法是通过 $.replaceWith():

$('img,video').replaceWith($('<div>Text Here</div>'));

如果需要过滤元素：

$('img,video').each(function(el){
    if($(el).prop('tagName') == 'IMG' &&
       $(el).attr('alt') == 'the text...') {
           $(el).replaceWith($('<div>Text Here</div>'));
       }
})

但我不是 Chrome 扩展方面的专家，我只是将此代码放在 jQuery 中，因为您使用的是 jQuery。

当然可以做到，很多代码都是普通的 javascript 和 DOM API.

Answer 2

更新答案 试试这个，我注释了代码来解释一下。

// build array of triggers
var triggers = ['trigger1','trigger2','trigger3'];

// wait for page to load
$(function() {

    // show loading overlay
    $('body').append('<div id="mypluginname-overlay" style="height:100%;width:100%;background-color:#FFF;"></div>');

    // check page title
    var $title = $('head title');
    for(trigger of triggers) {
        if($($title).innerHTML.toLowerCase().indexOf(trigger) >= 0) {
            $($title).innerHTML = '*censored*'; 
        }
    }

    // check all meta
    $('meta').each(function() {
        var $meta = $(this);
        for(trigger of triggers) {
            if($($meta).attr('name').toLowerCase().indexOf(trigger) >= 0) {
                censorPage();
                return; //stop script if entire page must be censored
            } else if($($meta).attr('content').toLowerCase().indexOf(trigger) >= 0) {
                censorPage();
                return; //stop script if entire page must be censored
            }
        }
    });

    // check all img
    $('img').each(function() {
        var $img = $(this);
        for(trigger of triggers) {
            if($($img).attr('alt').toLowerCase().indexOf(trigger) >= 0) {
                censor($img);
            }
        }
    });

    // check all video
    $('video').each(function() {
        var $video = $(this);
        for(trigger of triggers) {
            if($($video).attr('alt').toLowerCase().indexOf(trigger) >= 0) {
                censor($video);
            }
        }
    });

    // if you want to be extra careful and check things like background image name,
    // you'll have to run this code here - very inefficent
    // but necessary if you want to check every single element's background image name:
    for($element of $('body').children()) {
        for(trigger of triggers) {
            if($($element).css('background-image').toLowerCase().indexOf(trigger) >= 0) {
                $($element).css('background-image','');
            }
        }   
    }

, function() { // Not sure if this is totally correct syntax, but use a callback function to determine when
               // when the rest of the script has finished running
        // hide overlay
        $('#mypluginname-overlay').fadeOut(500);
    }});

function censor($element) {
    // just a basic example, you'll probably want to make this more complex to overlay it properly
    $element.innerHTML = 'new content';
}

function censorPage() {
    // just a basic example, you'll probably want to make this more complex to overlay it properly
    $('body').innerHTML = 'new content';
}

---原答案--- 我不确定您想在这里做什么，您应该添加更多细节。但是，如果您选择使用 jQuery，它提供了大量有用的方法，包括方法 .attr()，它可以让您获取任何元素的任何属性的值。

示例：

var alt = $('#my-selector').attr('alt');
if (alt == 'whatYouWant') {
  alert('yay');
} else {
  alert('nay');
}

根据 Javascript 是否存在 ALT 属性执行操作

Do an action based on presence of ALT attribute with Javascript

html

javascript

image

alt