3

I'm trying to find a "best" method for dynamically loading files, and other elements by using the new html 5 "data-" attribute for storage and then removing it when needed.

My Question:

How do I target the "data-" attribute and remove it thus leaving the remaining attribute name?

For example, this:

<!-- Custom CSS -->
<link rel="stylesheet" class="custom" data-href="css/mobile.css">

Would turn into this:

<!-- Custom CSS -->
<link rel="stylesheet" class="custom" href="css/mobile.css">



Edit: This entire experiment is for Responsive Design (ui/performance), I need to be able to load css files/ elements depending on device resolution. This will result in higher performance for smaller devices to prevent unnecessary data loading. I'm using enquire.js plugin (amazing btw), which allows you to have functions fire off when a media query is targeted. So in an effort to stay current I wanted to use the "data-" attribute to add/remove elements from the DOM depending on device resolution.

This tutorial by Christian Heilmann does just this: http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

I'm trying to combine his technique with enquire.js

Improve this question
5
  • 1
    yeah, don't. jQuery already has a getScript function for loading scripts, use that. api.jquery.com/jQuery.getScript Commented Oct 16, 2013 at 23:26
  • But what about when it's a stylesheet I want to load conditionally? or an image? Commented Oct 16, 2013 at 23:31
  • 1
    those things behave VERY differently from script elements. for scripts, don't do this. If it's for stylesheets and images, we have a valid question, but then you should edit your post first. Commented Oct 16, 2013 at 23:34
  • Ok, I edited to change javascript example to css example Commented Oct 16, 2013 at 23:40
  • fair do, answered as a real answer. Commented Oct 16, 2013 at 23:47

3 Answers 3

Reset to default
4

Assuming you know how to get to your elements, enabling is a one liner:

$(element).attr("href", $(element).data("href"));

since the data-href does nothing, you don't need to remove it. Just mirror it as real href attribute. To invalidate, either invalidate the href attribute again:

$(element).attr("href", false);

or remove it altogether:

$(element).removeAttr("href");

And for <img> it's the same trick but with the string "src" instead of "href"

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

What about for other elements? I.E. a <p> tag? Would that be a completely different approach?
<p> has no source attributes (neither src nor href), so I don't know what you're asking about here. You can use this trick on any attribute in any element, but certain attributes have profound effects on the browser (like a src attribute on a <script> element that's located in the document <head>) and can't just be toggled on and off without persistent changes to the page.
This worked well, but instead the "false", I chose this: $(element).removeAttr("href"); -- Please see my edit to my question as you can better see what I'm trying to achieve.
edited for both versions. Remember to flag an answer as correct if it was what you were looking for, for future SO visitors.
I'm still curious as if removing the "data-" all together and leaving the remaining "href" or whatever I want is possible? I think this would be ideal, for example: <img class="screen-only" data-src="images/computer00.jpg" data-alt="Computer" />, If I can simply remove and add them back it might be less code. Also, for the example of a something like <p class="screenonly">Hide this text when on mobile/tablet devices.</p>, what would be the best way to remove/add elements back like this that don't target attributes?
|
3

While I agree that it's worth questioning whether this is the correct way to approach this problem, from a technical stand-point this is how you access, remove, and add attributes on elements.

$('[data-attrName]').each(function() {
    var $el = $(this);
    var val = $el.attr('data-attrName');
    $el.removeAttr('data-attrName')
       .attr('attrName', val);
});
Improve this answer

1 Comment

Checkout my Edited question up above and let me know if you think this is the correct approach or not. I'm all about learning the correct technique!
1

To replace all data-attributename attributes with attributename can be accomplished simply by looping over the data object.

$(element).each(function() {
    var 
        el = $(this),
        data = el.data();

        $.each(data,function(key,value) { el.attr(key,value); });
});

I'll point out what others have already pointed out, though - I think you have decided that this is what you need to do to accomplish something, when it probably isn't what you should be doing.

Try asking a question whose answer will solve your actual problem, not asking a question whose answer will solve the problem that you are experiencing when you are using it to try and solve another problem....I'll understand if you don't understand that last sentence.

Improve this answer

1 Comment

LOL, I understand what you mean completely.. I made an edit to my question so you can better understand what I'm trying to achieve. I've been digging into this topic for a solid month now gathering different techniques. I'm just trying to put them all together now in an easy to understand format.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.