[CSS] Breite eines Elements auslesen und einer Variable übergeben (Stylish)

[cbtestarossa]

]Hallo, zuerst einmal angemerkt das ich kein Webdesigner bin und ich gerade mit Stylish an einem Style für CB herumbastle. Ich hoffe ich drücke mich richtig aus, ansonsten bitte gerne verbesseren.

Nun gibt es auf dieser Homepage ein "Element" das nennt sich .col-main

Wenn ich mit Firefox Element untersuchen anklicke kommt so ein Inspektor-Fenster
wo im rechten Fenster folgendes steht:

.col-main {
    float: left;
    margin-right: 10px;
    padding-right: 0px;
    width: 630px;
}

somit weiß ich dass die Vorgabe 630px dafür ist.

nun würde ich die Breite in PX aber gerne mittels dem Addon STYLISH irgendwie auslesen und einer selbst angelegten Variable übergeben um damit rechnen zu können.

Momentan sieht mein Code im Stylish-Style so aus

/* nach rechts einrücken und verschmälern (Originalbreite=630px) */ 
.col-main {
  --Versatz:14px; /* Variable VERSATZ definieren und den Wert 14px zuteilen */
  margin-left:var(--Versatz)!important;
  width: calc(630px - var(--Versatz))!important;
}

ich will quasi dass anstelle des von mir fest angegebenen Wertes von
width: calc(630px -
dann
width: calc(var(--variable_mit_wert_der_breite_in_px) -
steht

Jemand ne Idee wie man das ausliest?

 

[rg88]

zum ersten: .col-main ist eine css-Klasse

Zweitens: Was hast du genau vor, dann kann man dir vll weiterhelfen

 

[cbtestarossa]

naja ich mach mit STYLISH ein Design, ich überschreibe quasi damit im FF das neue CB-Design

wenn ich die Breite auslesen könnte dann ginge das leichter bzw. automatisiert falls sich da mal was ändert im Original

Hier siehst du was ich meine
http://fs2.directupload.net/images/150408/4xitjnek.png

 

[rg88]

document.getElementElementById("IDdesELEMETS").width
so kannst du die eigenschaft eines bestimtes elements auslesen

 

[cbtestarossa]

Das habe ich auch schon irgendwo gelesen, kapier da nichts.
Wo finde ich die ID ?
Und wo steht dann der Wert und wie weise ich den einer Variablen zu?
Ich brauche nur den genauen Code um es zu verstehen, so versteh ich nur Bahnhof

 

[Madman1209]

Hi,

Wo finde ich die ID ?

Seitenquelltext ansehen?

VG,
Mad

 

[Yuuri]

Nix da, auslesen, Variablen setzen und irgendwo was setzen ist mit CSS nicht. Das geht nur mit SCSS oder Less, aber das kannst du hier nicht anwenden. Du könntest das höchstens lokal verwenden und die resultierende CSS dann in Stylish nutzen.

 

[cbtestarossa]

Also kann ich das nun auslesen oder nicht?
Ich habe schon gegoogelt wie blöd aber finde nichts.
Auch sind die Anleitungen generell eher mau und für Stylish finde ich auch kein HELP.

FF kann das ja auch irgendwie, weil er mir ja im Browserfenster über dem gerenerten Bild anzeigt was die Breite des Elements ist (oder wie auch immer diese Spalte heißt ) wenn ich ELEMENT UNTERSUCHEN wähle.


Vollbild: http://fs2.directupload.net/images/150409/qrultml3.png

 

[Madman1209]

Hi,

Stylish ist CSS - Variablen und Auslesen ist JavaScript.

VG,
Mad

 

[cbtestarossa]

document.getElementElementById("IDdesELEMETS").width
so kannst du die eigenschaft eines bestimtes elements auslesen

geht es damit nicht`?

 

[Madman1209]

Hi,

das ist JavaScript! Wenn Stylish mit JavaScript arbeiten kann geht es, wenn nicht (wovon ich ausgehe) dann nicht.

VG,
Mad

 

[cbtestarossa]

Ja das ist ja genau das was ich von euch wissen will.
Ich bin da echt nicht fit darin.
Ich suche ne Lösung und weiß nicht wie ich das machen soll mittels STYLISH.

 

[Madman1209]

Hi,

nochmal: wenn Stylish nur CSS kann kannst du darin nicht mit JavaScript arbeiten - das geht schlicht nicht!

VG,
Mad

 

[cbtestarossa]

Das habe ich verstanden, aber ändert nichts daran.
Ich will das irgendwie lösen.
Kann man denn STYLISH nicht irgendwie mit JS kombinieren o.ä..?

 

[Yuuri]

Nein, Stylish ist CSS. Und dort heißt es definieren oder vererben, nicht "Nimm die Breite von da und sowieso". Und SCSS/Less sind da auch nicht viel anders, außer dass du dort bspw. Variablen nutzen kannst.

 

[cbtestarossa]

Stylish kann doch auch Variablen verwenden.
Schau doch oben im unteren Code, da habe ich eine Variable --versatz definiert und ihr einen Wert 14px zugeteilt. und STYLISH rechnet dann damit. CALC(

 

[Nase]

Das hat aber weniger mit Stylish an sich zu tun, als vielmehr damit, dass Firefox CSS-Variablen unterstützt. Das hat Stylish nur aufgegriffen.

 

[cbtestarossa]

naja zumindest funktioniert das irgendwie, bin darauf auch nur zufällig irgendwo gestoßen.

Wie könnte ich das nun angehen dass ich die Breite irgendwie einlesen kann?

 

[Yuuri]

Using CSS variables

This is an experimental technology

Gilt nur für Firefox.

Was aber nichts an deiner Problematik ändert, dass du nicht auf andere Elemente oder Definitionen zugreifen kannst.

 

[cbtestarossa]

Ja das habe ich alles schon gesehen und auch herumprobiert.

Ich will das lösen und ich glaube es gibt eine Lösung.
Nur kenne ich mich zu wenig aus mit dem ganzen.

auf
document.getElementElementById("IDdesELEMETS").width
bin ich auch irgendwo schon gestoßen und ich dachte das könnte funktionieren.

nur blick ich da nicht durch wo ich diese ID finde bzw was die überhaupt ist und wo die steht