JQuery를 사용하여 :before css 선택기의 너비 속성 변경

JQuery를 사용하여 :before css 선택기의 너비 속성 변경

이 질문에는 이미 다음과 같은 답변이 있습니다.

자바스크립트 사용 후 :::before, :::: 등 CSS 유사 요소 선택 및 조작 (28개 답변)

닫힘4년 전에.

이미지가 들어간 페이지가 있는데 CSS selectors 전에 :를 사용해서 스타일링을 했습니다.
이미지는 동적이므로 고정된 너비가 없으므로 규칙의 너비를 동적으로 설정해야 합니다.
JQuery를 이용해서 클라이언트 쪽에서 하고 싶습니다.
정:

.column:before{
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column{
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

클래스의 너비 속성만 변경할 수 있는 방법:beforeJQuery를 사용하는 셀렉터(그리고 그것이 없는 셀렉터는 아님)?

의사 수업의 규칙에 직접 접근할 수 있는 jQuery-way는 없다고 생각하지만, 당신은 항상 새로운 규칙을 추가할 수 있습니다.style문서 머리 부분에 대한 요소:

$('head').append('<style>.column:before{width:800px !important;}</style>');

여기서 실시간 데모 보기

저도 이 문제를 해결하는 플러그인을 한 번 본 기억이 있는데 아쉽게도 처음 구글링에서 찾을 수 없었습니다.

의사 요소는 섀도 DOM의 일부이므로 수정할 수 없습니다(그러나 해당 값을 쿼리할 수 있습니다).

하지만, 여러분은 때때로 예를 들어, 수업을 이용함으로써 그것을 극복할 수 있습니다.

jQuery

$('#element').addClass('some-class');

CSS

.some-class:before {
    /* change your properties here */
}

이는 쿼리에는 적합하지 않을 수 있지만 때때로 이 패턴을 달성할 수 있음을 보여줍니다.

유사 요소의 값을 얻으려면 다음과 같은 코드를 사용해 보십시오.

var pseudoElementContent = window.getComputedStyle($('#element')[0], ':before')
  .getPropertyValue('content')

의사 요소는 DOM의 일부가 아니므로 jQuery나 자바스크립트로 조작할 수 없습니다.

그러나 허용된 답변에서 지적된 대로 JS를 사용하여 유사 요소의 스타일링을 종료하는 스타일 블록을 추가할 수 있습니다.

자인이가 정답입니다.pseudo-selector를 통해 요소를 선택할 수는 없지만 를 사용하여 스타일시트에 새 규칙을 추가할 수 있습니다.

당신에게 도움이 될만한 걸 만들었어요

var addRule = function(sheet, selector, styles) {
    if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
    if (sheet.addRule) return sheet.addRule(selector, styles);
};

addRule(document.styleSheets[0], "body:before", "content: 'foo'");

http://fiddle.jshell.net/MDyxg/1/

아주 멋지게 하기 위해(그리고 정말로 질문에 대답하기 위해) 저는 그것을 다시 롤아웃하고 jQuery-plugin으로 포장했습니다(그러나 jquery는 여전히 필요하지 않습니다.

/*!
 * jquery.addrule.js 0.0.1 - https://gist.github.com/yckart/5563717/
 * Add css-rules to an existing stylesheet.
 *
 * @see http://stackoverflow.com/a/16507264/1250044
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/05/12
 **/

(function ($) {

    window.addRule = function (selector, styles, sheet) {

        styles = (function (styles) {
            if (typeof styles === "string") return styles;
            var clone = "";
            for (var p in styles) {
                if (styles.hasOwnProperty(p)) {
                    var val = styles[p];
                    p = p.replace(/([A-Z])/g, "-$1").toLowerCase(); // convert to dash-case
                    clone += p + ":" + (p === "content" ? '"' + val + '"' : val) + "; ";
                }
            }
            return clone;
        }(styles));
        sheet = sheet || document.styleSheets[document.styleSheets.length - 1];

        if (sheet.insertRule) sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
        else if (sheet.addRule) sheet.addRule(selector, styles);

        return this;

    };

    if ($) $.fn.addRule = function (styles, sheet) {
        addRule(this.selector, styles, sheet);
        return this;
    };

}(window.jQuery));

사용법은 매우 간단합니다.

$("body:after").addRule({
    content: "foo",
    color: "red",
    fontSize: "32px"
});

// or without jquery
addRule("body:after", {
    content: "foo",
    color: "red",
    fontSize: "32px"
});

https://gist.github.com/yckart/5563717

한 가지 옵션은 이미지에서 속성을 사용하고 jQuery를 사용하여 수정하는 것입니다.그런 다음 CSS에서 해당 값을 취합니다.

HTML (참고로 내가 가정하는 것은.column가div무엇이든 될 수 있습니다):

<div class="column" bf-width=100 >
    <img src="..." />
</div>

jQuery:

// General use:
$('.column').attr('bf-width', 100);
// With your image, along the lines of:
$('.column').attr('bf-width', $('img').width());

그런 다음 CSS에서 이 값을 사용하려면 다음과 같이 하십시오.

.column:before {
    content: attr(data-content) 'px';
    /* ... */
}

이렇게 하면 특성 값을 다음에서 가져옵니다..column, 앞에 발라주세요.

출처: CSS 특성 (이전 예를 참고), jQuery 특성.

기본 클래스에서 속성 상속을 시도할 수 있습니다.

var width = 2;
var interval = setInterval(function () {
    var element = document.getElementById('box');
    width += 0.0625;
    element.style.width = width + 'em';
    if (width >= 7) clearInterval(interval);
}, 50);

.box {
    /* Set property */
    width:4em;
    height:2em;
    background-color:#d42;
    position:relative;
}
.box:after {
    /* Inherit property */
    width:inherit;
    content:"";
    height:1em;
    background-color:#2b4;
    position:absolute;
    top:100%;
}

<div id="box" class="box"></div>

볼트클락은 jQuery를 사용한 후 :::before, :::fore와 같은 CSS 의사 요소를 선택하고 조작하는 것에 대한 답변에서 다음과 같이 말합니다.

다른 실제 DOM 요소처럼 브라우저에서 CSS를 통해 렌더링되지만 의사 요소 자체는 DOM의 일부가 아니므로 jQuery로 선택하고 조작할 수 없습니다.

pseudo CSS selector를 사용하는 대신 jQuery로 스타일을 설정하는 것이 최선일 수 있습니다.

언급URL : https://stackoverflow.com/questions/10061414/changing-width-property-of-a-before-css-selector-using-jquery